728x90
8. z-index
- 포지션을 적용한 요소는 z-index(레이어개념)를 사용할 수 있음
- z-index 미적용시 가장 마지막에 작성한 요소가 가장 상위에 배치됨
- z-index는 0을 기준으로 음수 양수 입력이 가능하며 수치값이 높을 수록 상위에 배치
- 일반적인 z-index입력수치는 양수값을 기준으로 작성
- 계층구조에서 z-index는 상위요소의 z-index에 종속됨. 즉 상위요소의 z-index보다 수치가 높더라도 상위요소의 z-index보다 우선하지 않음
■ 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0; padding:0;} .box1{width: 100px; height: 100px; background-color: #f00; position: absolute; left:75px; top:30px;} .box2{height: 100px; background-color: #0f0;} .box{width: 100px; height: 100px; background-color: #0f0; border: 3px solid #000; position: absolute;} .box3{right: 0; top:0;} .box4{right:25px; top:25px;} .box5{right:50px; top:50px;} .box6{right: 0; bottom:0; z-index: -3;} .box7{right:25px; bottom:25px; z-index: 2;} .box8{right:50px; bottom:50px; z-index: 1;} .parent{width: 200px; height: 100px; background-color: #f00; position:absolute;} .child{width: 300px; height: 50px; background-color: #0f0; position:relative; z-index: -1;} .p{width: 300px; height: 100px; background-color: #f00; margin: 20px;}/*부모요소*/ .p .c{width: 100px; height: 250px; background-color: #0f0; position: absolute; z-index: 9999}/*자식요소*/ .p1{position:relative; z-index: 1;} .p2{position: relative; z-index: 2; background-color: #00f;}/*부모의 형제요소*/ </style> </head> <body> <h2>일반요소와 포지션요소</h2> <div class="box1">포지션(relative)</div> <div class="box2">일반요소</div> <!-- z-index와 상관없이 포지션 요소는 일반요소 상위에 배치됨 --> <h2>포지션요소끼리 배치(z-index 미적용)</h2> <div class="box box3">포지션1(absolute)</div> <div class="box box4">포지션2(absolute)</div> <div class="box box5">포지션3(absolute)</div> <!-- z-index 미적용시 가장 마지막에 작성한 요소가 가장 상위에 배치됨--> <h2>포지션요소끼리 배치(z-index 적용)</h2> <div class="box box6">포지션-3</div> <div class="box box7">포지션2</div> <div class="box box8">포지션1</div> <!-- z-index는 0을 기준으로 음수 양수 입력이 가능하며 수치값이 높을 수록 상위에 배치 z-index가 적용된 요소는 미입력 요소보다 무조건 상위에 배치 일반적인 z-index입력수치는 양수값을 기준으로 작성 --> <h2>일반요소와 z-index</h2> <div class="parent">부모</div> <div class="child">자식</div> <!-- z-index에 음수값을 입력하는 경우 일반요소 뒤에 배치 --> <h2 style="margin-top:60px;">계층구조에서의 z-index</h2> <div class="p p1"> <div class="c"></div> </div> <div class="p p2"></div> <!-- 계층구조에서 z-index는 상위요소의 z-index에 종속됨. 즉 상위요소의 z-index보다 수치가 높더라도 상위요소의 z-index보다 우선하지 않음 --> </body> </html> |
■ 실행결과
※ 예제 1개가 너무 긴 것 같지만, 비교하면서 볼 수 있도록 한 번에 편집해 봤어요.
z-index를 포지션 속성과 함께 알아두면 요소의 위치를 잡을 때, 도움이 되실 것 같습니다.
포지션 속성에 관한 다른 글도 참고해보세요^^
반응형