본문으로 바로가기

03 CSS로 Positioning하기 - position:absolute


absolute는 적용하고자 하는 객체가 포함된 객체의 모서리 기준이다.


아래 소스코드의 #article01을 보자 position:absolute 를 적용했다.

#article01{
	position:absolute;
	width:100px;
	height:100px;
	background:#3E454C;
	
	top:300px;
 	left:500px;
}

#article02{
	position:static;
	width:100px;
	height:100px;
	background:#2185C5;
}

#article03{
	position:static;
	width:100px;
	height:100px;
	background:#7ECEFD;
}

#article04{
	position:static;
	width:100px;
	height:100px;
	background:#FFF6E5;
}

#article05{
	position:static;
	width:100px;
	height:100px;
	background:#FF7F66;
}

결과 화면

section의 모서리 기준으로 300*500px 떨어진 위치에서 그려진다.






댓글을 달아 주세요