[CSS] position 한 번에 정리하기!

position 은 부모 요소 내의 자식 요소에 부여해 자식 요소의 위치를 결정하는 방법이다.

position으로 줄 수 있는 속성은 다음의 5가지가 있다.

 

static

html에서 기본적으로 나에게 부여하는 위치.
블록 요소라면 위에서 아래로, inline 요소라면 한국어 쓰는 순서대로 배치된다. 

 

 

relative

원래 나의 static 위치를 기준으로 움직인다.
원래 내가 있던 공간은 그대로 비워져 있다. (특별히 다른 요소를 조작하지 않는 한 다른 요소는 침범하지 않는다.)
따로 left, right, top, bottom 값 중 하나도 주지 않으면 static 자리에 그대로 존재한다. 

 

 

relative를 부여하면 요소가 붕 뜨게 된다.

포토샵을 해 보았다면 포토샵에서 레이어 하나를 위에 더 생성해 거기에 요소를 옮긴 것이나 마찬가지라고 생각하면 쉽다.

포토샵을 모른다면 원래 있던 도화지 위에 투명 셀로판지를 덧대고 그 셀로판지로 요소를 옮겨 그렸다고 생각하면 편하다.

따라서 다른 요소들과 겹칠 수 있다.

 

 

cf) margin을 주는 것과 position: relative의 차이

마진을 주면 나의 크기가 작아지고 내 옆의 요소에 침범을 하지 못한다.

relative는 아예 나는 그대로 유지되고 스티커처럼 위로 올라간다.

 

absolute

가장 가까운 요소 중 position: static이 아닌 요소를 기준으로 움직인다.
원래 내가 있던 공간은 다른 요소가 채운다. 
자리 차지를 안하기 때문에 내부 요소가 없을 경우 따로 width, height를 지정하지 않으면 아예 사라져 버린다. 
내부 요소가 있다면 내부 요소의 크기만큼 자리를 차지한다. 

 

 

 

cf) absolute로 중앙 정렬하기

div 안에 요소를 중앙 정렬 하고 싶다면?

display: absolute;
left:50%; 
top: 50%;
transform: translate(-50%, -50%);

 

이 코드를 사용하면 된다. 부모 div에는 position:static 이외의 값을 부여해야 하므로 보통 position: relative를 부여한다.

 

fixed

브라우저 화면의 왼쪽 상단을 기준으로 움직인다. 
정한 위치에 고정되어있다. 
자리 차지를 안하기 때문에 내부 요소가 없을 경우 따로 width, height를 지정하지 않으면 아예 사라져 버린다. 
내부 요소가 있다면 내부 요소의 크기만큼 자리를 차지한다. 

 

 

sticky

브라우저 화면의 왼쪽 상단을 기준으로 움직인다.
내가 지정한 위치로 스크롤되기 전 까지는 static처럼 있다가 지정한 위치에 닿으면 고정된다. 
원래 내가 있던 공간은 그대로 비워져있다. (특별히 다른 요소를 조작하지 않는 한 다른 요소는 침범하지 않는다.)
따로 left, right, top, bottom 값 중 하나도 주지 않으면 static 자리에 그대로 존재한다. 

 

부모 요소에 종속되기 때문에 부모 요소가 화면 밖으로 없어지면 sticky 요소도 화면 밖으로 따라 사라진다. 

쉽게 말해 부모 안에 포함되어 있다.