CODEWITHSUNDEEP
htmlcss
Key-Six
Key-Six

Reputation: 2469

How to add multiple layers to a site without affecting the content?

I What is the best way to add multiple layers with the help of z-index to a site without affecting any of the existing content? One layer would be positioned absolute, the second for example relative, 3rd would be fixed and so on.

I don't know, if I'm making a mistake over again, but I've tried this more than once and it works good with two or three layers. With more (e.g. 10 layers), it starts affecting the position of some elements, so I adapt their position, but I think, that that's only a visual solution.

Thank you.

Upvotes: 0

Views: 5581

Answers (1)

Dexter Huinda
Dexter Huinda

Reputation: 1222

Position the layers in the same manner as the rest, so, yes you can create more layers on top of one another without affecting the positioning. The content of each layer should be the same size, so as not to push the height or width. Btw, position them all as absolute and you are good to go. See multiple layers in action here: http://jsfiddle.net/BcAWC/

The sample code:

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>

​--

Move the class "movetotop" across each layer to see the movement of layers going on top of the other.

Upvotes: 1

Related Questions