이번 포스팅에서는 CSS의 position 속성에 대해 정리해보자!
POSITION 속성이란?
https://developer.mozilla.org/ko/docs/Web/CSS/position 를 참조하여 작성하였습니다.
CSS position 속성은 말 그대로 문서 상에 요소를 배치하는 방법을 지정하는 것이다. 프론트엔드 개발자가 굉장히 많이 사용하는 속성중 하나이므로 꼭 알아야 한다. 😎😎
position 속성은 static, relative, absolute, fixed, sticky 5가지 중에 하나로 설정할 수 있다. 각각의 특징을 하나씩 살펴보자.
✨기준점✨만 알고있자!
본격적으로 들어가기전에, 기억하자! 포인트는 기준점이다. 어디를 기준으로 위치가 선정되는지만 파악하면 어렵지 않게 익힐 수 있다. 😊😊
MDN에서 제공하는 CSS DEMO를 이용해보며 차이점을 하나씩 살펴보도록 하자.
1. Static
static 속성은 아무런 값을 지정해 주지 않았을 시 기본(default)으로 설정되는 값이며,
top, right, bottom, left, z-index 속성을 적용할 수 없다. (적용해도 무시된다.😅)
MDN CSS demo에서 static을 적용했을때 모습이다.
2. Relative
relative는 element를 기존에 있었던 자리 기준으로 상대적으로 배치한다. 따라서 페이지 레이아웃에서 relative를 적용하고 아무런 효과도 주지 않았을때, 차지하는 공간은 static일 때와 같다.
top이나 left등의 속성을 적용하면 이 위치를 기준으로 효과가 적용된다.
MDN CSS Demo에서 relative의 결과를 보자.
static일 때와 결과를 비교해보자. 노란색 박스가 기존에 있었던 자리를 기준으로 top과 left 설정이 적용된 결과를 확인 할 수 있다!
또한 relative는 주변 레이아웃에 영향을 주지않는다. static과 비교했을때 기존의 파란색 박스들이 차지하였던 영역은 그대로 유지되는 것을 볼 수 있다.
3. Absolute
absolute 속성은 element를 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. 여기서 위치 지정 조상 요소라고 함은 position 속성이 static이 아닌 조상을 의미한다.
즉 조상 중 가장 처음 position: static이 아닌 element 기준으로 위치를 잡는다! 또한 absolute를 선언 하면 해당 element의 display는 block으로 자동으로 바뀐다.
relative와 다르게 주변 레이아웃에 영향을 미친다. absolute로 설정을 하면 element를 일반적인 문서 흐름에서 제거하기 때문에, 페이지 레이아웃에 공간을 따로 배정하지 않는다.
따라서 부모노드의 width가 정의되어 있지 않을때 자식 요소를absolute로 설정하면 부모의 크기도 작아져버린다!
실제로 위의 그림에서 파란 박스가 속한 구역의 width가 좁아진 것을 확인할 수 있다. 이해가 잘 안간다면 relative의 결과와 비교해보자. 😊
4. Fixed
fixed 속성은 아예 위치를 고정해버리는 것으로, viewport(browser의 전체 크기)가 기준이 된다. 기존에 포함되어 있던 상자(box)에서 완전히 벗어나서 전체 페이지 상에서 position이 진행이 된다. 즉 scroll을 해도 화면 상에 고정된다.
위치를 지정한 부모를 기준으로 잡는 absolute와는 다르게 (0,0) 위치에서 부터 시작한다!
5. Sticky
sticky도 viewport를 기준으로 동작한다. fixed와의 차이점은, element가 viewport안에 있을 시에는 relative와 같이 동작하지만, viewport에서 사라지는 순간 fixed처럼 동작하며 설정한 위치에 고정된다.
즉 sticky 속성은 relative처럼 동작하다가 스크롤이 특정 지점에 도달하면 element를 고정시킨다. (참고로 ie에서는 동작하지 않는다. 😂😂)
Fixed와 Sticky의 차이는 여기에서 명확하게 확인해볼 수 있다!
추가
Position과 z-index에 관한 좋은 글을 발견해서 공유합니다!
