Question

我希望得到这样的结果：
https://ibb.co/htJD6J
在我的风格中，我设置为父亲位置相对; z-index 50.对于孩子，我设定了绝对位置; z指数25。但结果，我得到了这个。
https://ibb.co/cwhjDy
附：对不起，发布图片的声誉不够。所以，我无法理解为什么z-index不能正常工作。有人可以帮我吗？

添加代码：父

.sel_project_block {
 background-color: #f5876e;
 border-radius: 14px;
 margin-right: 150px;
 width: 239px;
 height: 34px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 position: relative;
 box-shadow: 1px 3px 7px #000;
 z-index: 5;
}

子

.additional {
 max-width: 185px;
 position: absolute;
 top: 76.2%;
 right: 22.05%;
 z-index: 1;
 color: #67573e;
 background-color: #fff;
 border: 1px solid #978d7e;
 font-size: 16px;
 width: 185px;
}

Answer 1

设置position: anything-that-is-not-static会建立新的堆叠上下文。

子元素的位置相对于父元素 （即position: relative）。

因此，如果您希望它在后面显示，则必须为其提供否定 z-index。

Answer 2

由于div#child是div#parent的子元素，并且由于div#parent建立了堆叠上下文（因为它具有整数z-index值），因此您无法放置div#parent 1}}在div#child之上增加其z-index

您为div#child设置的z-index位于div#parent的上下文中。因此，如果您希望div#child显示在div#parent下方，则需要为div#child设置负z-index。

将来 - 如果您发布代码以附带您的问题，答案将更容易理解。（另外，正确提问也会产生更好的结果）

Answer 3

因为.child与其.parent相关，所以它的z-index也是如此。

您可以通过删除父级的z-index来取消此操作：

＆＃13;

.sel_project_block {
  background-color: #f5876e;
  border-radius: 14px;
  margin-right: 150px;
  width: 239px;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  box-shadow: 1px 3px 7px #000;
}

.additional {
  height: 50px;
  max-width: 185px;
  position: absolute;
  top: 76.2%;
  right: 22.05%;
  z-index: -1;
  color: #67573e;
  background-color: #fff;
  border: 1px solid #978d7e;
  font-size: 16px;
  width: 185px;
}

＆＃13;

<div class="sel_project_block">
  <div class="additional"></div>
</div>

＆＃13;

Answer 4

好的，同事们。几个小时后，我解决了我的问题。我做了什么：起初，我添加了新的包装器，并将所有块包括父和子。第二，我添加到包装块z-index = 3;并设置为下拉块z-index = -1。似乎在哈巴狗：

.dropdownWrapper
 .sel_project_block
 .sel_project_block__proj
   span New Project
.sel_project_block__imgWrapper(@click="showDropdown")
  img(src="../assets/images/white-arrow.png")
.clientsTop__dropdown
.additional(v-if="dropdownVisible")
.first {{ newProject.trans }}

...

和scss代码：

.dropdownWrapper {
height: 34px;
width: 239px;
margin-right: 50px;
z-index: 3;
position: relative;

.sel_project_block {
  ...
}

.clientsTop__dropdown {
  z-index: -1;
  position: absolute;
  top: 59.2%;
  right: 13.8%;
...

  .additional {
    ...
  }
}

}

嵌套div的z-index

4 个答案: