如何将父div放在其子项之上?

时间:2017-11-07 08:33:29

标签: html css z-index

我有一个容器div,它有background-color: red;。这个容器大约有12个孩子,最后一个孩子有background-color: blue;个孩子。我尝试使用background-color: blue将容器移动到孩子的顶部。我为容器使用了更高的z-index,但它仍然落后于孩子。



.no1 {
  width: 800px;
  height: 300px;
  background-color: red;
  position: relative;
  z-index: 999;
}

.no2 {
  position: relative;
  width: 500px;
  height: 200px;
  background-color: blue;
  z-index: 1;
}

.no3 {
  position: relative;
}

.no4 {
  position: relative;
}

.no5 {
  position: relative;
}

<div class="no1">
  <div>
    <div>
      <div class="no3">
        <div>
          <div class="no4">
            <div>
              <div>
                <div>
                  <div class="no5">
                    <div class="no2">


                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

Here is the JSFiddle

3 个答案:

答案 0 :(得分:1)

您可以从父项中删除z-index,并为子项提供负z-index

.no1 {
  width:800px;
  height:300px;
  background-color:red;
  position:relative;
}

.no2 {
  position:relative;
  width:500px;
  height:200px;
  background-color:blue;
  z-index: -1
}

.no3 {
  position:relative;
  
}

.no4 {
  position:relative;
  
}
.no5 {
  position:relative;
  
}
<div class="no1">
  <div>
    <div>
      <div class="no3">
        <div>
          <div class="no4">
            <div>
              <div>
                <div>
                  <div class="no5">
                    <div class="no2">


                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分:0)

要将子div与父div重叠,删除给予容器(父div)的z-index,并将负z-index值添加到子div。

我更新了你的小提琴here。希望能解决问题。

.no1 {
  width:800px;
  height:300px;
  background-color:red;
  position:relative;
}

.no2 {
  position:relative;
  width:500px;
  height:200px;
    background-color:blue;
    z-index:-1;
}

.no3 {
  position:relative;
  
}

.no4 {
  position:relative;
  
}
.no5 {
  position:relative;
  
}
<div class="no1">
Parent Div
<div>
<div>
<div class="no3">
<div>
<div class="no4">
<div>
<div>
<div>
<div class="no5">
<div class="no2">
Child Div

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

答案 2 :(得分:0)

您可以通过为子div

添加z-index:-1来实现此目的