Z-索引堆叠顺序问题

Question

我在这里检查了所有类似问题的答案，并在网上搜索过--我阅读了所有关于堆叠顺序的教程--但我仍然有一个问题。我想在另一个元素的基础上堆叠一个元素，但不能以我想要的方式将它堆栈起来。下面是元素的基本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>

​

所以，正如您所看到的，我正在尝试将元素1堆在元素2的上面，但它就是做不到。

Answer 1

这一问题的答案很奇怪：

将“元素-2”上的z-索引设置为0。

这是一个奇怪的问题，可能不会出现在其他人身上，但无论如何，我还是要经历一遍。

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

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

感谢您的阅读。

Answer 2

CSS 顶部、左边、背景颜色仅用于演示。

#element-1高于#element-2橙是z-指数高的绿色原因

​

#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-指数较高的橙色原因

​

#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>

​