2020-06-10

position 속성중에 absolute는 부모의 속성이 static이냐 아니냐에 따라서 위치가 달라진다.

부모의 position속성이 static인 경우
- 부모의 범위를 벗어난다
- 부모의 부모의 속성이 static 이외의 속성을 만나기 전까지 계속 벗어난다

부모의 position속성이 static이 아닌경우
- 부모의 범위 안에서 위치가 결정 된다

아래 예제를 보면 무슨 말인지 알 수 있을 것이다.

<style media="screen">
.div0{
	position:relative;
	border: 3px solid red;
	padding:10px;
}
.div1{
	position:static;
	border:3px solid black;
	width:300px;
	height:100px;
	margin-top:50px;
}
.div2{
	position:absolute;
	border:3px solid blue;
	top:0;
	left:0;
}
.div3{
	position:relative;
	border:3px solid black;
	width:300px;
	height:100px;
}
.div4{
	position:absolute;
	border:3px solid blue;
	top:20px;
	left:20px;
}
</style>

<div class="div0">
	<div class="div1">
		position:static
		<div class="div2">
			static 속성인 부모를 가진 div
		</div>
	</div>

	<div class="div3">
		position:relative
		<div class="div4">
			static 속성이 아닌 부모를 가진 div
		</div>
	</div>
</div>