CSS position 속성

1 개요

CSS position Property

CSS position 속성

static	(기본값) 위에서 아래로 순서대로 배치됨. top, left 지정 무시됨
relative	상대적인 위치
absolute	절대적인 위치(부모 기준). 스크롤시 그에 따라 움직임
fixed	절대적인 위치(화면 기준). 스크롤해도 화면 위치 그대로 고정됨

2 예시

<style>
.container {
	margin: 5px;
	height: 100px;
	background: silver;
	font-size: 20px;
}
.box {
	width: 40px; height: 30px;
}
.box-static {
	position: static;
	left: 30px; top: 30px;
	background-color: red;
}
.box-relative {
	position: relative;
	left: 30px; top: 30px;
	background-color: orange;
}
.box-absolute {
	position: absolute;
	left: 200px; top: 30px;
	background-color: yellow;
}
.box-fixed {
	position: fixed;
	left: 300px; top: 30px;
	background-color: green;
}
</style>
 
<div class='container'>A
	<div class='box box-static'>static1</div>
	<div class='box box-static'>static2</div>
</div>
<div class='container'>B
	<div class='box box-relative'>relative1</div>
	<div class='box box-relative'>relative2</div>
</div>
<div class='container'>C
	<div class='box box-absolute'>absolute1</div>
	<div class='box box-absolute'>absolute2</div>
</div>
<div class='container'>D
	<div class='box box-fixed'>fixed1</div>
	<div class='box box-fixed'>fixed2</div>
</div>
<div class='container'>E</div>
<div class='container'>F</div>
<div class='container'>G</div>

→ static1, static2는 left, top이 무시되고 "가" 아래로 차례로 출력됨

→ relative1, relative2는 "나" 아래를 원점으로 하여 (40, 40) 위치부터 차례로 출력됨

→ absolute1, absolute2는 화면 기준으로 (100, 40) 위치에 겹쳐 출력됨

→ fixed1, fixed2는 화면 기준으로 (200, 40) 위치에 겹쳐 출력됨. ( 단, 스크롤해도 고정되어 있음 )

3 같이 보기

• CSS position absolute, fixed 차이 상세
• CSS left, top 속성
• CSS float 속성
• jQuery .position()
• CSS 내비게이션바 상단 고정

5 참고

• http://www.w3schools.com/cssref/pr_class_position.asp