[목차]
A. Position 속성
B. Z-index
A. Position 속성
[css]
#visual > .img { position: absolute; position: relative; }
position 속성은 사이트 안에 '요소를 배치하는 방법'을 지정하는데
position: absolute와 relative는 margin이나 padding과 달리 상하좌우로 영역을 이동한다.
이는 이미지가 겹치는 효과를 내고 싶을 때 주로 사용한다.
/* top left right bottom z-index */
1) position: absolute
[css]
#visual > .img { position: absolute; /* top left right bottom z-index */ left: 100px; top: 50px; width: 900px; height: 300px; background: silver; }
은색 박스가 위에서부터 50픽셀만큼 좌측에서부터 100픽셀만큼 이동하면서 위로 뜬다.
absolute는 절대경로(브라우저를 기준으로)로 움직이며
position: absolute를 이용한 원소는 문서의 정상적인 흐름에서 제거되고, 다른 원소는 보이지 않는 것처럼 위로 뜬다.
2) position: relative
[css]
#visual > .img { position: relative; /* top left right bottom z-index */ left: 100px; top: 50px; width: 900px; height: 300px; background: silver; }
absolute 대신 relative를 삽입시 비주얼 상위태그 영역 안에서 같은 방식으로 움직인다. (상대경로)
position: relative는 absolute와 달리 겹치지 않는다.
[html]
<div id="visual"> <div class="img">1</div> <div class="img2">2</div> </div>
[css]
#visual > .img { position:relative; /* top left right bottom z-index */ left: 100px; top: 50px; width: 900px; height: 300px; background: silver; }#visual > .img2 { position:relative; /* top left right bottom z-index */ left: 100px; top: 50px; width: 900px; height: 300px; background: pink; }
핑크박스가 실버박스와 같은 위치에 겹치지 않고 실버박스 아래에 생긴다.
이러한 특성의 차이 때문에 position: absolute와 relative를 병행해서 쓰는 경우가 많다.
(겹치는 효과를 주려면 position: relative로 먼저 바탕을 세팅하고 position: absolute로 위로 덮는다.)
B. z-index
z-index: 1;
[html]
<div id="visual"> <div class="img"> <div class="box1">1</div> <div class="box2">2</div> </div>
[css]
#visual > .img > .box1 { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background: red; z-index: 2; }#visual > .img > .box2 { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background: blue; z-index: 1; }
position: absolute를 이용하면 요소를 겹치게 놓을 수 있는데,
이 때 요소들의 수직 위치를 z-index 속성으로 정할 수 있다.
원래는 더 아래에 쓴(우선도가 높은) 블루박스가 레드박스 위로 올라와야 하지만
z-index: 2로 인해 레드박스가 블루박스위로 뜨게 된다.
이와 같이 z-index 속성에는 태그가 적힌 위치와 관계 없이 우선순위를 조정하는 효과가 있다.
(z-index의 기본값은 1이며 숫자가 높을수록 상위에 위치한다. -999부터 999까지)
하지만 아무 요소에나 다 z-index를 넣는다고 해서 우선순위를 넣을 수는 없다.
z-index 속성이 적용되기 위해서는 z-index를 적용한 영역이
position:static 값이 아니어야 한다.
[css]
<style>
.wrap{position:relative;}
.box1{background:blue; width:100px; height:100px; z-index:2;}
.box2{position:absolute; top:0; left:0; background:red; width:50px; height:50px; z-index:1;}
</style>
<body>
<div class="wrap">
<div class="box1">BOX1</div>
<div class="box2">BOX2</div>
</div>
</body> 이와 같이 파란 박스를 z-index:2로 설정해놓았기 때문에
더 위쪽에 위치해야할 것 같지만
실제로 출력되는 화면을 보면 빨간 박스가 파란 박스 위를 덮고 있다.
그 이유는 .box1에 position 값이 지정되어있지 않았기 때문에
z-index 속성이 먹히지 않은 것이다.
이를 해결하려면 .box1에 position:relative를 삽입해야 한다.
[css]
<style>
.wrap{position:relative;}
.box1{background:blue; width:100px; height:100px; z-index:2;}
.box2{position:absolute; top:0; left:0; background:red; width:50px; height:50px; z-index:1;}
</style>
<body>
<div class="wrap">
<div class="box1">BOX1</div>
<div class="box2">BOX2</div>
</div>
</body>
psition: fixed;
영역의 위치가 고정되는 효과를 준다.
사이트 상단의 네비게이션 바나 하단(footer)영역 등을
마우스를 스크롤해도 고정된 위치에 띄우고 싶을 때에 사용한다.
[html]
<div id="footer">copyright ©</div>
[css]
#footer { position: fixed; bottom: 0px; width: 100%; height: 100px; background: black; z-index: 3;
