[CSS] position

 

position이란 태그들이 화면상에 어디에 위치할 것인가를 결정하는 것

1. offset

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨저져 있는지 지정한다.
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨저져 있는지 지정한다.
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨저져 있는지 지정한다.
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨저져 있는지 지정한다.

 

2. position

종류	설명
static	문서의 흐름에 맞춰 배치한다. 기본값이다.
relative	위칫값을 지정할 수 있다는 점을 제외하면 static과 같다.
absolute	relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
fixed	브라우저 창을 기준으로 위치를 배치한다.

 

[absolute]

 

💡 absolute를 사용했을 때 relative를 사용한 상위요소가 없다면 브라우저 창 자체를 기준으로 위치를 지정한다.

💡 absolute를 사용했을 때 상위요소와 상위요소의 상위요소 모두 relative를 사용했다면 해당 태그의 가장 가까운 상위요소를 기준으로 위치가 지정된다.

 

[fixed]

 

• position이 fixed가 아닌 상황

 

• position이 fixed인 상황