z-index 用于嵌套 div

Question

我希望得到这个结果：
https://ibb.co/htJD6J
在我的样式中，我设置了 parent 相对位置； z-index 50. 对于 child 我设置了绝对位置； z-index25。但结果，我得到了这个。
https://ibb.co/cwhjDy
P.S。抱歉，post 图片的声誉不足。所以，我不明白为什么 z-index 不能正常工作。有人可以帮我吗？

添加代码： parent

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

child

.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）。

所以如果你想让它出现在后面 parent，你必须给它一个negative z-index.

Answer 2

由于div#child是div#parent的子元素，并且由于div#parent建立了一个堆叠上下文（因为它有一个整数z-index值），你不能把div#parent 通过增加其 z-index

在 div#child 之上

您为 div#child 设置的 z-index 在 div#parent 的范围内。所以如果你想让 div#child 出现在 div#parent 下面你需要为 div#child.

设置一个负的 z-index

将来 - 如果您 post 代码伴随您的问题，答案将更容易理解。（另外，正确提问也会得到更好的结果）

Answer 3

因为 .child 是相对于它的 .parent，它的 z-index 也是相对的。

您可以通过删除父项的 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;
}

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

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

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 {
    ...
  }
}

}

z-index 用于嵌套 div

z-index for the nested div

css

scss-lint

pug