html - 如何在不影响内容的情况下向站点添加多个图层？

Question

在不影响任何现有内容的情况下，借助 z-index 向站点添加多个图层的最佳方法是什么？一层是绝对定位，第二层是相对的，第三层是固定的，依此类推。

我不知道，如果我又犯了一个错误，但我已经尝试了不止一次，它适用于两层或三层。随着更多（例如 10 层），它开始影响某些元素的位置，所以我调整它们的位置，但我认为这只是一个视觉解决方案。

谢谢你。

Answer 1

以与其他图层相同的方式放置图层，因此，是的，您可以在不影响定位的情况下创建更多图层。每一层的内容应该是相同的大小，以免推高或推宽。顺便说一句，将它们全部定位为绝对值，您就可以开始了。在这里查看多个层：http: //jsfiddle.net/BcAWC/

示例代码：

CSS：

div { width: 300px; height: 300px; text-align: center; border: 1px solid black;  position: absolute; }
div#layer1 { background-color: red; }
div#layer2 { background-color: green; }
div#layer3 { background-color: blue; }
div#layer4 { background-color: red; }
div#layer5 { background-color: green; }
div#layer6 { background-color: blue; }
div#layer7 { background-color: red; }
div#layer8 { background-color: green; }
div#layer9 { background-color: blue; }
div#layer10 { background-color: red; }

p { color: white; font-size: 50px; margin-top: 120px; }
.movetotop { z-index: 10; }

HTML：

<div id="layer1" class="">
    <p>Layer 1</p>
</div>
<div id="layer2" class="">
    <p>Layer 2</p>
</div>
<div id="layer3" class="">
    <p>Layer 3</p>
</div>
<div id="layer4" class="">
    <p>Layer 4</p>
</div>
<div id="layer5" class="">
    <p>Layer 5</p>
</div>
<div id="layer6" class="">
    <p>Layer 6</p>
</div>
<div id="layer7" class="">
    <p>Layer 7</p>
</div>
<div id="layer8" class="movetotop">
    <p>Layer 8</p>
</div>
<div id="layer9" class="">
    <p>Layer 9</p>
</div>
<div id="layer10" class="">
    <p>Layer 10</p>
</div>

​--

在每一层上移动类“ movetotop ”，以查看层在另一层之上的移动。