BootStrap模式显示不正确

Question

我修改了页面的UI，使得图像中心有一个图像和一个浮动div。 div有按钮打开模态（Bootstrap 3.3.7）。当我点击按钮时，所有内容都显示为灰色，并且模式打开但在div内部，既不能看到完整也不能看到。以下是相同的屏幕截图（由于隐私和安全问题，不能包含完整页面）

这是div的CSS：

.card {
            /* For Shadow Effect*/
            box-shadow: 0 16px 32px 0 rgba(0,0,0,0.9);
            transition: 0.3s;
            /* Diemensions */
            padding: 5px;
            width: 400px;
            height: 159px;
            text-align: center;
            border-radius: 1rem;
            /*making it stick to the centre*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* randome stuff*/
            background: #CFD8DC;
            margin: auto;
        }

Answer 1

您必须将z-index类的.card属性设置为大于重叠黑色半透明元素的值。

要进行更深入的分析，请打开Web检查器以深入了解HTML结构并找到上面提到的重叠元素。然后，在样式属性（应该在右侧）中，找到z-index属性。如果找不到，请检查其父元素。如果您仍然无法找到它，您应该能够设置一个大于零的任意值，这样可以使您的页面看起来像您想要的那样。

请记住，z-index只有在position属性设置为absolute或relative或fixed时才有效。