콘텐츠에 영향을주지 않고 여러 레이어를 사이트에 추가하는 방법은 무엇입니까?

Question

I 기존 콘텐츠에 영향을주지 않고 사이트에 z- 인덱스를 사용하여 여러 레이어를 추가하는 가장 좋은 방법은 무엇입니까? 하나의 레이어는 절대 위치에 배치되고, 두 번째 레이어는 상대적으로 배치되고, 세 번째 레이어는 고정 될 것입니다.

내가 다시 통해 실수를 만들고있어 경우에 나는 모르겠지만, 내가 한 번 이상이 더 시도하고이 두 개 또는 세 개의 층으로 잘 작동합니다. 더 많은 (예 : 10 개의 레이어) 요소의 위치에 영향을 미치기 시작하여 위치를 조정하지만 시각적 인 해결책 일뿐입니다.

감사합니다.

Answer 1

위치 나머지 부분과 같은 방법으로 레이어, 그래서, 그래 당신은 위치에 영향을주지 않고 서로의 상단에 더 많은 레이어를 만들 수 있습니다. 높이 또는폭 밀어 않도록 각 레이어의 내용은, 동일한 크기이어야한다. Btw, 그들 모두 절대로 배치하고 당신은 잘 갈 수 있습니다.

이동 클래스 "-

<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> 

: 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 여기에 행동에 여러 레이어를 참조하십시오 movetotop "각 층에 걸쳐 다른 레이어 위에 레이어가 이동하는 것을 볼 수 있습니다.