[CSS] position 속성 사용법

[CSS] position property 사용방법

 

position은 위치를 결정하는 속성이다.

 

• static (default): 위치를 지정하지 않음
• relative: static의 위치부터 위치를 계산함
• absolute: 원래 위치와 상관없이 위치를 지정함
• fixed: 위치를 고정시킴

 

 

position: static

-기본 값이다.

-왼쪽에서 오른쪽으로, 위에서 아래로 쌓인다.

 

position: relative

-static일 때의 위치를 기준으로 위치를 계산한다.

-top, bottom, right, left로 세부 위치를 지정한다.

(ex)

 top: 10px;

 right: 10px;

 bottom: 5px;

 left: 5px;

 

position: absolute

-parent 중 position이 static인 속성을 가지고 있지 않은 parent를 기준으로 움직인다.

 즉, position이 relative, absolute, fixed인 parent를 기준으로 움직인다.

 만약 그러한 parent가 없다면 가장 위의 태그가 기준이 된다.

 

position: fixed

-위치를 고정시킨다.

-스크롤을 내려도 위치는 고정된다.