position , z-index 사용법 정리

z-index 가 높을수록 위에 표시된다. 

1. position과 z-index를 사용하지 않았을때

[출처] z-index의 사용법|작성자 nsoft21

<style>
.layer1 { width:100%; height:100px; background:red;}
.layer2 { width:100%; height:100px; background:blue;}
.layer3 { width:100%; height:100px; background:green;}
</style>

<div class="layer1">1번</div>
<div class="layer2">2번</div>
<div class="layer3">3번</div>

2. position만 썼을때

[출처] z-index의 사용법|작성자 nsoft21

<style>
.layer1 { position:absolute; width:100%; height:100px; background:red;}
.layer2 { position:absolute; width:100%; height:100px; background:blue;}
.layer3 { position:absolute; width:100%; height:100px; background:green;}
</style>

<div class="layer1">1번</div>
<div class="layer2">2번</div>
<div class="layer3">3번</div>

3. position과 z-index 모두 썼을때

<style>
.layer1 { position:absolute; z-index:3; width:100%; height:100px; background:red;}
.layer2 { position:absolute; z-index:2; width:100%; height:100px; background:blue;}
.layer3 { position:absolute; z-index:1; width:100%; height:100px; background:green;}
</style>

<div class="layer1">1번</div>
<div class="layer2">2번</div>
<div class="layer3">3번</div>

[출처] z-index의 사용법|작성자 nsoft21

[출처] z-index의 사용법|작성자 nsoft21

[출처] z-index의 사용법|작성자 nsoft21

출처 : 아래포스팅 참고

http://blog.naver.com/nsoft21/220241886190