如何在父母的子女之上定位父母的子女？ [英] How to position a parent div on top of its child?

问题描述

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

  .no1 {width：800px; height：300px;背景颜色：红色;位置：相对; z-index：999;}。no2 {position：relative;宽度：500px; height：200px;背景颜色：蓝色; 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>  

这是JSFiddle

解决方案

div>

你可以从父母中删除z-index，并给孩子一个负z-index

  .no1 {width：800px;高度：300像素;背景色：红色; position：relative;}。no2 {position：relative;宽度：500像素;高度：200像素;背景色：蓝色; 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>  

I have a container div and it has background-color: red;. There are about 12 children to this container, and the last child has background-color: blue;. I tried to move the container to top of the child with background-color: blue. I used a higher z-index for the container but it is still behind the child.

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

Here is the JSFiddle

解决方案

You could remove the z-index from the parent and give the child a negative 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>

这篇关于如何在父母的子女之上定位父母的子女？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！