z-index 堆叠顺序问题答案

【问题标题】：z-index stacking order issuez-index 堆叠顺序问题
【发布时间】：2018-03-09 10:43:46
【问题描述】：

我已在此处检查了所有类似问题的答案并搜索了网络 - 我已阅读有关堆叠顺序的所有教程 - 但我仍然遇到问题。我想将一个元素堆叠在另一个元素之上，但不能让它按照我想要的方式堆叠。以下是元素的基本 HTML 和 CSS 结构：

#element-1{
   position: relative;
   z-index: 2 !important;
}
#element-2{
   position: relative;
   display: flex;
   justify-content: center;
   z-index: 1;
}

<div id='element-1'>
   <p>stuff in here</p>
</div>
<div id='element-2'>
   <p>stuff in here2</p>
</div>

所以，如您所见，我正在尝试将 element-1 堆叠在 element-2 之上，但它不会这样做。

【问题讨论】：

“堆叠在上面”是什么意思。你的意思是关于z平面的顶部？还是关于 y 平面？
就 z 平面而言
所以，我似乎通过从 element-2 中删除 z-index 解决了这个问题。当我第一次制作网站时，我一定需要它，但我现在似乎不需要它。我不得不对网站进行一些修改。很抱歉浪费了您的时间。
当!important 觉得有必要时，你知道你走错了方向。
如果你将第二个元素设置为position: absolute 会发生什么？

标签： css z-index

【解决方案1】：

CSS top、left、background-color 仅用于演示目的。

#element-1 上方 #element-2 橙色高于绿色，导致 z-index 较高

#element-1{
    position: absolute;
    z-index: 2;

    /* next properties are only for demonstration purposes but not needed */
    top: 0;
    left: 0;
    background-color: orange;
}
#element-2{
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 1;
 
     /* next properties are only for demonstration purposes but not needed */
    top: 20px;
    left: 20px;
    background-color: green;
}

<div id='element-1'>
    <p>stuff in here</p>
</div>
<div id='element-2'>
    <p>stuff in here</p>
</div>

#element-2 上方 #element-1 绿色高于橙色，导致 z-index 较高

#element-1{
    position: absolute;
    z-index: 1;

    /* next properties are only for demonstration purposes but not needed */
    top: 0;
    left: 0;
    background-color: orange;
}
#element-2{
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 2;
 
     /* next properties are only for demonstration purposes but not needed */
    top: 20px;
    left: 20px;
    background-color: green;
}

<div id='element-1'>
    <p>stuff in here</p>
</div>
<div id='element-2'>
    <p>stuff in here</p>
</div>

【讨论】：

我尝试将 e-1 的不透明度设置为 0.99，将 e-2 的不透明度设置为 0.5，但效果不佳。它们仍然反向堆叠。
@tdrsam 抱歉 opacity 仅用于演示目的。 opacity 只是为元素设置“透明度”。查看您必须与z-index 叠加的更新答案
所以关键是将重叠元素设置为absolute?
不，关键是z-index，但如果不是position: absolute，则元素彼此相邻，而不是彼此之上。所以在这种情况下，如果设置position: relative; z-index 将无效。 Read more (all) about positioning here
1/ z-index 在元素定位（设置为固定、绝对、相对或我猜是粘性的）后立即生效。未使用默认值静态定位) 但直到该元素（在 X-Y 平面中）有机会位于另一个元素的顶部或底部时，您才会看到它。 position: absolute 实现了这一点，transform: translate(-10px, -10px); 也实现了这一点。 2/ background-color 和 opacity 是有机会看到正在发生的事情的有用方法（正如 MDN 关于 z-index 的文章所做的那样）。

【解决方案2】：

这个答案很奇怪：

将 'element-2' 上的 z-index 设置为 0。

这是一个奇怪的问题，可能不会为其他人提出，但无论如何我都会解决它。

我已将“element-2”的 z-index 设置为 1，因为我在网站的桌面版本中需要它。它里面有链接，如果没有 z-index，链接就无法工作。后来我需要对网站进行修改，在进行更改时，我检查了网站移动版本上的弹出导航菜单——即“element-1”——它不会位于“element-2”的前面'。我刚刚再次检查了该站点，当我将“element-2”的 z-index 设置为 1 时，它位于“element-1”的前面。如果我完全删除“element-2”的 z-index，它将无法在桌面版本上正常工作，因此针对此特定问题的解决方法是：

#element-2{
  z-index: 0;
}

感谢阅读。

【讨论】：