본문으로 바로가기

css로 positioning하는 법을 배워보자 - position:static


관련글

2013/03/11 - [Web개발/Web Standard] - 02 CSS로 Positioning하는 법을 배워보자 - position:relative

2013/03/11 - [Web개발/Web Standard] - 03 CSS로 Positioning하는 법을 배워보자 - position:absolute

2013/03/11 - [Web개발/Web Standard] - 04 CSS로 Positioning하는 법을 배워보자 - float:left



positioning옵션은 크게 3가지이다.

static, relative, absolute.


css에 적용하는 방법은 아래와 같다.

position:static;

position:relative;

position:absolute;



먼저 position:static;에 대해서 알아보자. 


#article01{

	position:static;
	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;
}


결과 화면.

이렇게 나온다.


아래 소스코드 '#article01'을 보자 위치를 top:20px; left:40px;라는 값을 주었다. 어떻게 변하는지 보자.


#article01{
	position:static;
	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;
}

결과 화면.

이런.. 변화가 없다.

posistion:static 을 적용하면 시작 위치를 지정해 주어도 개체의 위치가 변하지 않는다.






댓글을 달아 주세요