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

Question

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

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

谢谢。

Answer 1

以与其余层相同的方式定位层，因此，是的，您可以在彼此之上创建更多层而不影响定位。每一层的内容应该大小相同，以免挤压高度或宽度。顺便说一句，将它们全部定位为 absolute 就可以了。在此处查看多层操作: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”类移动到每一层，以查看层在另一层之上的移动。