BootStrap模式错误显示

Question

我修改了页面的用户界面，以便在图像的中心有一个图像和一个浮动div。 div具有打开模式的按钮（引导程序3.3.7）。 当我单击按钮时，所有内容均显示为灰色，并且模式在div内打开，但在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才有效。