div.or.kr이 ofcourse 로 이전 될 예정입니다.
새로운 강의로 보기
position 속성

개요

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