개요
position 속성은 태그의 위치 표시 상태를 의미한다.
속성값에는 아래의 5개가 있다.
static - 기본값으로 위치정보를 임의로 설정 해줄 수 없다.
absolute - 절대위치로, 문서 최 좌측상단을 기준으로 위치정보를 설정하며 스크롤시 이동한다.
relative - 상대위치로, static 위치 사용시 있던 위치를 기준으로 이동한다.
fixed - 위치 고정으로, 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표가 설정되어있다.
inherit - 부모 태그의 속성값을 상속받게 된다.
position 속성은 보통 단독으로 쓰이기 보단 left, right, top, bottom 속성과 함께 쓰인다.
position 을 absolute 나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지며 inline-box 처럼 크기에 맞게 딱 붙게 된다.
사용법
#box1 { position:static } #box2 { position:absolute } #box3 { position:relative } #box4 { position:fixed } #box5 { position:inherit }
예제
<html> <head> <style> .box{ padding:10px; border:1px solid green; } #box1 { position:static; top:20px; right:30px } #box2 { position:absolute; top:20px; right:30px } #box3 { position:relative; top:20px; left:30px } #box4 { position:fixed; top:20px; right:30px } </style> </head> <body> <div id="box1" class="box">static 박스</div> <div id="box2" class="box">absolute 박스</div> <div id="box3" class="box">relative 박스</div> <div id="box4" class="box">fixed 박스</div> </body> </html>
출력 결과:
static 박스
absolute 박스
relative 박스
fixed 박스
추가
position 속성이 relative 인 컨테이너 속에 position 속성이 absolute 인 객체가 있으면 absolute 객체는 컨테이너 기준으로 이동하게 된다.예제
<html> <head> <style> #box-container { position:relative; height:90px; margin-top:40px; border:1px solid red; } #box-inner { position:absolute; top:30px; left:20px; border:1px solid blue; } </style> </head> <body> <div id="box-container"> 컨테이너 <div id="box-inner">absolute 박스</div> </div> </body> </html>
출력 결과:
컨테이너
absolute 박스