[CSS] Position 속성 활용시, 주의하여야 할 점

 

1. Static & Relative

- Position 속성이 정해지지 않으면, 기본적으로 지정되는 값이다. Static이란 말은 '정적인'이란 뜻으로 움직이지 않는 것을 의미한다. Relative와 비슷한 속성을 갖으며, 별다른 특성을 가지지 않는다. 

 

2. Absolute 

- Absolute는 자신에게 적용된 정렬에 영향을 받지 않는다. 위치지정 역시, left/right/top/bottom 등을 활용하여 지정해주어야 한다. 또한, Absolute 포지션을 활용할 때에는 항상 상위 박스의 Position을 점검하는 습관을 갖아야한다. 왜냐하면 Position은 Static이 아닌, 부모 박스를 찾아 해당 박스 안에 속하여 위치가 지정되기 때문이다. 

 

See the Pen WNwgaLW by joonho lee (@goldycoder) on CodePen.

 

3. Fixed

- 스크롤을 올리거나 내려도 변화되지 않는 메뉴바 등을 만들 때 사용된다. 주로 사용되는 방법은 블록요소에 너비(width)와 높이(height)을 지정해주고, 해당 영역에 Position: Fixed를 설정해주어야 한다는 점이다. 위치가 절대값을 갖는다는 점에서 Absolute와의 공통점이 있다. 

 

4. Sticky

- Sticky는 웹페이지에서 상단으로 이동시키는 버튼, 하단으로 이동시키는 버튼 등의 용도로 사용된다. Sticky를 사용할 때 주의하여야 할 점이 있는데, 이는 top/left/right/bottom 등의 위치를 지정해주어야 사용할 수 있다는 점이다. Fixed와의 차이점은 Z-index가 낮게 설정되어, 다른 요소들 아래로 나타나게 된다. 따로 Z-index 값을 높게 설정해주어야 한다. 

 

See the Pen WNwgaLW by joonho lee (@goldycoder) on CodePen.