위코드의 첫번째 과제인 자기소개 페이지를 만들다가 css의 position 속성이 헷갈려서 다시 한번 정리해야겠다는 생각이 들었다. 여기서 다룰 position의 속성은 static, relative, absolute, fixed, sticky이다.
1. static
기본적으로 모든 태그들은 position: static;인 상태이다. 따라서 css에 position 값을 따로 지정하지 않아도 된다.
div tag는 block 속성이므로 위에서 아래로,
span tag는 inline 속성이므로 왼쪽에서 오른쪽으로 쌓인다.
2. relative
이번에는 css에서 박스 전체를 감싸고 있는 노란색 container와 I'm box라고 씌여있는 파란색 박스 속성에 다음과 같은 코드를 동일하게 추가했다.
left: 20px;
top: 20px;
position: relative;둘 다 원래 있던 자리에서, 왼쪽에서 20px, 위에서 20px만큼 이동해 있는 모습을 볼 수 있다.
여기서 position 값을 relative로 지정하지 않으면 left, top 20px은 먹히지 않는다.
3. absolute
다음으로, I'm box의 position을 absolute로 변경해 보았다.
위 화면을 보면, 원래 있어야 할 자리가 기준이 아니라, I'm box를 감싸고 있는 부모요소, container를 기준으로 위에서 20px, 왼쪽에서 20px만큼 이동한 것을 볼 수 있다.
position이 relative였을 때는 원래 있어야할 자리만큼의 영역이 유지되었으나, absolute로 바꾸는 순간 원래 있어야할 자리의 영역이 없어진 것도 확인할 수 있었다.
4. fixed
그리고 I'm box의 position 속성을 fixed로 변경해 보았다.
위 화면에서 보이는 대로, I'm box의 위치는 container의 위치와 상관없이, window 내에서 왼쪽으로 20px, 위에서 20px 만큼 떨어져 있다.
또 스크롤을 내려보면 항상 같은 자리에 고정되어 있는 것을 볼 수 있다.
5. sticky
마지막으로 sticky는 container 안에 들어오면서, 스크롤을 내려도 원래 위치에 고정되는 특성을 가진다.
css는 이렇게 쉬운 예제로 정리하면 참 쉽게 느껴지는데, 막상 실전에서 코드를 작성하다 보면 뒤죽박죽 되어버리는 느낌이다..
Ref.
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://www.youtube.com/watch?v=jWh3IbgMUPI
