Question

我有2个元素，其中一个带有此CSS：

{
    background: #f5f5f5;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    right: 0;
    left: 300px;
    height: 75px;
    z-index: 3;
}

和另一个与此CSS：

{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
}

元素编号1高于元素编号2。这怎么可能？我不知道该怎么办，如果我将元素1的z-index设置为0，就可以了，但是元素1在其他元素下面，应该是这样。基本上，元素1是标题菜单，元素2是整个屏幕弹出窗口。

有人可以帮忙吗？

Answer 1

在Box模型中，z-index是重叠的二维对象的顺序。从几何学上讲，z-index是与坐标y轴和x轴相交的垂直z轴。

堆栈顺序元素的可见性取决于它们的值。值较高的元素具有较高的可见性优先级，因此它与Box模型中的其他元素重叠，并且优先级较低的元素将产生。但是，这需要在文档对象模型（DOM）中放置元素。

DOM只能渲染相对，绝对和固定位置属性不是静态的元素。它不需要将元素放置在顶部以提高可见性，也不需要将元素放在底部以降低可见性。只要该元素具有较高的z索引顺序值，其他所有元素都将屈服。意味着它将具有很高的显示优势。例如，值为1的z-index优先于值为0的z-index。

如果element-1的z-index为1，element-2的z-index为0，则element-1的优先级将更高，并且将位于顺序的顶部，而element-2的优先级将更高。由于优先级较低，因此产量较低。

这是您问题的答案。您在问： “元素编号1高于元素编号2。这怎么可能？”

如上所述。上方或下方都无所谓。重要的是z-index优先级的值。

在您的情况下，您将element-1的z-index：放在3上方，将element-2的z-index：1000放在下方，以为element-1由于其DOM位置而具有较高的精度。错了您必须了解HTML Sementic可以构造DOM，但CSS可以设置DOM的样式或使其具有新的外观。

使用z-index，我们处理CSS而不是HTML。在这里，我们不构建元素，而是为其设置样式。

在上面的代码中，z-index：1000的element-2具有更高的优先级，并且无论其DOM位置如何，它都必须位于另一个之上。

Answer 2

感谢您的帮助，我已经解决了问题。由于某种原因，它实际上与CSS无关。为了解决这个问题，我要做的是：

整个html结构如下：

<div container>
    <div element 1></div>

    <div content>
        <div element 2></div>
    </div>
</div>

将结构更改为此就可以了：

<div container>
    <div element 1></div>

    <div content>
    </div>
</div>

 <div element 2></div>

我不知道为什么，因此，如果有人对此有解释，我将不胜感激。我根本没有改变CSS！但是，我将这个问题留给可能有类似问题的任何人。

再次感谢！

Z-Index问题，我对此没有任何解释

2 个答案: