0

我希望得到这个结果：
https://ibb.co/htJD6J
在我的样式中，我设置了相对父位置；z-index 50。对于孩子，我设置了绝对位置；z-index 25。但结果，我得到了这个。
https://ibb.co/cwhjDy
PS对不起，没有足够的声誉来发布图片。所以，我不明白为什么 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;
}
4

4 回答 4

0

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

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

所以如果你想让它出现在父元素的后面，你必须给它一个负数 z-index。

于 2018-05-16T15:36:12.113 回答
0

好的，同事们。几个小时后，我解决了我的问题。我做了什么：起初，我添加了新的包装器并将所有块包括父级和子级都放入其中。其次，我添加到包装块 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 {
    ...
  }
}

}

于 2018-05-17T13:17:33.853 回答
0

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

您设置的 z-indexdiv#child在div#parent. 因此，如果您想出div#child现在下方，则div#parent需要为div#child.

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

于 2018-05-16T15:37:14.533 回答
0

因为.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>

于 2018-05-16T15:49:46.333 回答