Question

I在不影响任何现有内容的情况下，借助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 ”类，以查看图层在另一个图层上移动。

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

1 个答案: