Question

我正在尝试使用z-index制作一堆div。为了做到这一点，我需要使用 position：absolute; ...但问题是每个元素上的宽度：100％; 不能正常工作，因为重叠父元素的宽度

我在这里喜欢......

//I'm using bootstrap css row-fluid to contain the dev
<div class="row-fluid" style="position: relative;">
   <div id="elem1" style="width:100%; z-index:4; position: absolute;" ></div>
   <div id="elem2" style="width:100%; z-index:3; position: absolute;" ></div>
   <div id="elem3" style="width:100%; z-index:2; position: absolute;" ></div>
   <div id="elem4" style="width:100%; z-index:1; position: absolute;" ></div>
</div>

父级内的元素将与父级的宽度重叠。如果有人在这里有更好的想法如何解决这个烂摊子我真的很感激..谢谢你

Answer 1

z-index仅适用于定位元素。

所以绝对位置不是强制性的。

您可以将z-index与

一起使用

position:absolute
position:relative
position:fixed

Answer 2

你的意思是这样吗？

＆＃13;

#elem1{
  background: #000;
}
#elem2{
  background: #e4ff00;
}
#elem3{
  background: #ffbc00;
}
#elem4{
  background: #ff8d00;
}
div{
  height: 30px;
  top:0;
}
.relative-holder{
  margin-top: 30px;
}

＆＃13;

<div class="row-fluid" style="position: relative;">
   <div id="elem1" style="width:100%; z-index:4; position: absolute;" >
     <div class="relative-holder" style="position:relative;">
     <div id="elem2" style="width:100%; z-index:3; position: absolute;" >
       <div class="relative-holder"  style="position:relative" >
         
     <div id="elem3" style="width:100%; z-index:2; position: absolute;" >
       <div  class="relative-holder"  style="position:relative" >
       
     <div id="elem4" style="width:100%; z-index:1; position: absolute;" ></div>
       </div>
     </div>
       </div>
     </div>
     </div>
   </div>
</div>

＆＃13;

Answer 3

我想通了..我只是使用 left：0 right：0 来展开父div中的div而不重叠父的宽度..感谢您的评论和回答： - ）

是否可以在不使用z-index的情况下制作一堆元素？

3 个答案: