Question

我知道属性：z-index对具有重叠的元网进行排序，并且z-index属性指定元素的堆栈顺序（哪个元素应该放在其他元素的前面或后面）。但是当我们有3个元素时，我们会做什么？例如：

<div id="1"> 
    <div id="2"> 
        <div id="3"> 
        </div> 
    </div> 
</div>

如果你想把最多的东西放在那之后，那之后该怎么办？

我没有任何问题与2重叠元素，并可以把它们按顺序但3元素令人困惑，我失去了我的div：（

像这样：example image

Answer 1

嗯，您可以根据需要拥有尽可能多的z-index。你可以：

z-index   -9999
z-index     0
z-index    9999

看看这个例子： http://jsfiddle.net/cristian_cena/xY5Re/

Answer 2

如果div位于彼此内部，则无需使用z-index。我想你正在寻找这样的东西。您需要更改大小，颜色和位置以将所有内容放在您想要的位置，但这是您在示例中发布的内容。

 <div id="1" style="height:373px; width:416px; background-color:#CCFF00; top:65px; left:54px; position:relative"> 
   <div id="2" style="height:279px; width:295px; background-color:#EA4800; top:65px; left:92px; position:relative">
     <div id="3" style="height:156px; width:180px; background-color:#00C1EA; top:91px; left:38px; position:relative">         
     </div> 
   </div>
 </div>

如果你想让div不在彼此之内，那么你需要使用z-index“＃”。然后你应该做这样的事情：

 <div id="1" style="height:373px; width:416px; background-color:#CCFF00; top:65px; left:54px; position:absolute; z-index:0"></div> 
 <div id="2" style="height:279px; width:295px; background-color:#EA4800; top:130px; left:146px; position:absolute; z-index:10"></div> 
 <div id="3" style="height:156px; width:180px; background-color:#00C1EA; top:221px; left:184px; position:absolute; z-index:20"></div>

重叠超过2个html元素

2 个答案: