[css] position(static/relative/absolute/fixed)

Position 속성의 default 값은 static 값이다

즉 div에 아무런 position 속성 값을 주지 않으면 static 속성을 가지고 있다.

 

position - static : 위에서 부터 아래로 하나의 block쌓기 처럼 블럭이 차례대로 쌓이게 된다

margin 값을통해 document 에서의 위치와 black 간의 위치를 조절할 수 있다.

 

	
A
	
B
	
C

실행시 이미지

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

Position -relative : static의 block 위치를 가지고 있지만 top / right / bottom / left 의 절대 좌표를 설정할수 있다.

 

static 요소 사이에  relative(green) 요소를 추가 left:100px; 값을 준 결과

좌측에서 100px 만큼 이동한걸 볼수있다

 

 

	

	
A
	
B
	
C

 

실행시 화면

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

Position -absolute: block개념을 벗어나 top / right / bottom / left 의 절대 좌표를 설정할수 있다.

 

absolute 속성을 가진 B요소에 top:100; left:100 값을 준 결과 A,B 요소의 위치에 상관 없이 document의 top에서100px left에서 100px만큼 이동한걸 알수 있다.

 

 

	
	
	
A
	
B
	
C

 

 

실행시 화면

 

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

Position -fixed: 기본적으로 absolute와 동일 하나 document 의 절대좌표가 아닌 브라우저의 절대좌표에 고정된다.

window의  scroll 이동 시 화면에 고정되어 따라온다.

 

 

	

	
A
	
B
	
C

 

실행 시 화면

 

 

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

position : absolute의 부모 자식 관계

 

div-black :  position : static;

div-green : position : relative;

div-red:     position : absolute;

 

 

 

 

 

실행 시  화면

 

구성

 

<static(black)>

<relative(green)>

<absolute(red)>

</absolute(red)>

</relative(green)>

</static(black)>

 

static 안에 relative 요소는 margin값이 적용되지만 absoulte 요소는 margin값이 적용 되지않는다.

relative 요소안에 absolute 요소는 document 의 절대좌표가 아닌 부모요소인 relative에서 절대좌표가 지정되어 그려지는걸볼수있다.

 

relative 요소가 아닌 static 요소 안에서는 부모를 무시하고 document 에서 절대좌표를 지정하여 그려진다.

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

부모의 속성이 static 일때의 absolute

 

 

 

 

 

크기가 150px이고 position이 staic 인  black 요소안에  red요소를  absolute로 지정한 결과 부모를 벗어나 document 요소에 절대 좌표가 지정되어 그려진걸 볼수있다~