[CSS] position (static, fixed, relative, absolute)

From Pixabay b3nj5m1n's Image

position 이란?

position은 보통 레이아웃에 사용되기보단, 위치를 아주 조금 위로, 아주 조금 오른쪽으로 옮기고 싶을 때 사용합니다.

 

position 종류

Position	설명
static	기본값으로, width와 heigth 조절이 안됨
fixed	화면에 고정. 스크롤 변동해도 항상 그 화면의 그자리에 존재
relative	상하좌우로 요소(element)를 약간 움직일 때 사용
absolute	가장 가까운 relatvie 부모를 기준으로 위치 설정

 

position: static이란?

position의 기본값(default)으로, 따로 position을 지정하지 않아도 적용됩니다. top, bottom, left, right를 이용해 위치를 지정할 수 없으며, 그저 왼쪽에서 오른쪽으로, 위에서 아래로 쌓입니다. 

예시) span은 inline 형태로 왼쪽에서 오른쪽으로, 위에서 아래로 쌓입니다. 

See the Pen position_static_example by netsus (@netsus) on CodePen.

위의 예시를 보면 "position static is default"라는 span 태그를 계속 반복하면 position이 디폴트로 static이기 때문에 왼쪽에서 오른쪽으로, 위에서 아래로 쌓이는 것을 확인할 수 있습니다.

 

position: fixed란?

화면을 스크롤해서 이리저리 움직여도, element가 항상 그 자리에 있게 합니다. 즉, 원래 element끼리 한 층(layer)에 있었다면, position fixed가 되는 순간 가장 바깥쪽 층(layer)가 된다고 볼 수 있습니다. 가장 바깥 쪽 층이란 파워포인트에서 가장 앞으로 가져오기를 누른 상태와 같습니다. 우리 눈에서 가장 가까운 곳으로 오는 것입니다.

예시) position fixed opacity 주고, 스크롤해 보이기.

See the Pen position_fixed by netsus (@netsus) on CodePen.

투명도가 있는 노란색 박스의 position이 fixed입니다. 초록색 박스와 달리 노란색 박스는 스크롤을 내려도 항상 그 자리에 있습니다.

 

position: relative란?

특정 요소를 아주 조금 움직이고 싶을 때 많이 사용합니다. 기능은 요소(element)가 처음 놓인 자리에서 상화좌우로 움직일 수 있게 하는 것입니다. 해당 속성을 사용하면, top, bottom, left, right를 이용해 위치 조절을 할 수 있습니다.

예시) top: 30px, left: 30px 예시

See the Pen position_relative by netsus (@netsus) on CodePen.

 

초록색 큰 박스(부모 박스) 내부에서 노란색 박스(자식 박스)의 position을 relative로 두고, top과 left에 30px을 줘서 위치 조정을 했습니다.

 

position: absolute란?

특정 요소에 대해, 그 부모가 기준이 아니라, 가장 가까운 relative 부모를 기준으로 움직이게 하는 것입니다. 만약 부모 중 relative 한 부모가 없다면 body를 기준으로 움직이게 될 것입니다. body는 relative 하기 때문이다. top, bottom, left, right를 이용해 움직일 수 있습니다.

예시) relative 한 'relative-parent'를 기준으로 'child'의 위치가 설정되는 예시

See the Pen position_relative by netsus (@netsus) on CodePen.

초록색 큰 박스(relative-parent)의 position을 relative로 두고, 그 자식으로 노란색 박스(child)의 position을 absolute로 설정하였습니다. 그러면 노란색 박스의 기준은 초록색 박스가 되며, right:0px과 bottom:10px을 줬을 때, 초록색 박스를 기준으로 오른쪽으로 붙고, 아래에서 10px 떨어진 곳에 노란색 박스가 위치하게 됩니다.

 

마치며

position은 static보단, relative와 absolute를 많이 쓰기 때문에 기초적인 콘셉트를 잘 알아두시면 도움이 됩니다. 감사합니다.

 

Reference

노마드 코더 코코아톡 클론코딩 #3.12-13