본문으로 바로가기

02 CSS로 Positioning하는 법을 배워보자 - position:relative


relative라는 단어는 '상대적인'이라는 뜻이 있다.

hello

아래 #article01을 보자. position:relative;를 적용했다. 

#article01{ position:relative; width:100px; height:100px; background:#3E454C; } #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; }

결과 화면

일단은 static을 적용한 것과 똑같다.


그러면 객체의 시작 위치를 지정해보자.


#article01{
	position:relative;
	width:100px;
	height:100px;
	background:#3E454C;
	
	top:20px;
 	left:40px;
}

#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;
}


결과 화면. static과 다르게 위치가 이동한 것을 볼 수 있다.




댓글을 달아 주세요