代码之家 › 专栏 › 技术社区 › Valerii Voronkov

嵌套div的z索引

scss-lint pug css

Valerii Voronkov · 技术社区 · 7 年前

我希望得到这样的结果:
https://ibb.co/htJD6J
在我的风格中,我设置了相对的父位置;z指数50。我为孩子设定了绝对位置;z指数25。但结果,我得到了这个。
https://ibb.co/cwhjDy
P、很抱歉,没有足够的声誉来发布图片。所以,我不明白为什么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 回复 | 直到 7 年前

Jos van Weesel 7 年前

因为 .child 相对于其 .parent ,其z指数也是如此。

您可以通过移除 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>

Quentin 7 年前

背景 position: anything-that-is-not-static 建立新的堆叠上下文。

子元素的位置为 关于母公司 (即 position: relative ).

所以如果你想让它出现 在…的后面 家长,你必须给它一个 消极的 z-index .

SOUPaLOOP 7 年前

自从 div#child 是的子元素 div#parent ,以及自 部门#家长 建立一个堆叠上下文(因为它有一个整数z索引值),您不能放置 部门#家长 在上面 div#子级 通过增加其z指数

设置的z索引 div#子级 在以下上下文中 部门#家长 .所以如果你想 div#子级 显示在下面 部门#家长 你需要设置一个负的z指数 div#子级 .

将来,如果你在问题中附上代码,答案就会更容易理解。(此外,适当提问也会产生更好的结果)

Valerii Voronkov 7 年前

好的,各位同事。几个小时后,我解决了我的问题。我所做的: 首先,我添加了新的包装器,并将所有包含父和子的块放在其中。第二步,我将z-index=3添加到包装块中;并设置为下拉框z索引=-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 {
    ...
  }
}

}