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>

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

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

Answer 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;
}

感谢阅读。

z-index堆叠订单问题

2 个答案: