html - Z-Index 问题，我没有解释

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

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

堆叠顺序元素的可见性取决于它们的值。具有高值的元素具有高可见性优先级，因此它与盒模型中的其他元素重叠，具有较低优先级的元素将屈服。但是，这需要在文档对象模型 (DOM) 中定位元素。

DOM 只能渲染具有相对、绝对和固定位置属性的元素，而不是静态的。 它不需要将元素放置在顶部以获得更高的可见性，也不需要将元素放置在底部以获得较低的可见性。只要元素的 z-index order 值高，所有其他元素都会屈服。这意味着它将以高优先级显示在其他元素之上。例如，值为 1 的 z-index 的优先级高于值为 0 的 z-index。

如果 element-1 的 z-index 为 1，element-2 的 z-index 为 0，则 element-1 将具有更高的优先级，它将在顺序之上，element-2 将yield 因为它的优先级较低。

这是您问题的答案。你在问: “元素编号 1 在元素编号 2 之上。这怎么可能？”

如上所说。上面是什么，下面是什么并不重要。重要的是 z-index 优先级的值。

在您的情况下，您将 element-1 与 z-index: 3 放在上方，将 element-2 与 z-index: 1000 放在下方，认为 element-1 由于其 DOM 位置而具有高优先级。那是错误的。您必须了解 HTML Sementic 构建了 DOM，但 CSS 对其进行了样式设置或赋予了它新的外观和感觉。

对于 z-index，我们处理的是 CSS 而不是 HTML。在这里我们不构造元素，而是设置它们的样式。

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