안까먹으려고 쓰는 css 공부일지 #1 - position
📝 이 주제를 가져온 이유
position을 제대로 공부하지 않은 상태에서 코드를 짜버렸다. css다 보니 기능 오작동과 같은 큰 문제는 없었지만..
팀장님이 왜 여기 absolute,relative를 썼는지 두 가지의 차이점을 물어봤는데 ㅎ,ㅎ,,
relative는 부모 요소 기준이고, absolute는 fixed같은거 아닌가요? 라는 믕청한 답변을 해버렸다
제대로 알지도 못한 상태에서 코드를 짠것에 대한 반성과 이제라도 제대로 써야겠다는 생각이 들어 요 주제를 가져왔다.
position의 종류
✅ static
✅ relative
✅ absolute
✅ fixed
✅ sticky
1. Static
position의 기본 (Default)
position이 따로 지정되어 있지 않은 것들은 모두 position: static 이라고 보면 된다.
위 이미지는 모든 요소들이 position이 지정되어 있지 않다 => 즉, position:static 상태!
- 코드 흐름상 모두 위치해야 할 자리에 위치해있음
- top, left, right, bottom, z-index의 영향을 받지 않음
2. relative
relative div에만 position: relative, top: 50px, left: 50px을 준 상태
top, left, right, bottom의 영향을 받기 때문에 기존 있어야 할 위치(static일때의 위치)에서,
지정한 값(top/bottom/left/right) 만큼 위치가 변동됨
위 이미지는 top: 50px, left:50px을 주었기 때문에 , 기존 있어야 할 위치에서 위에서 50px, 왼쪽에서 50px 떨어진 위치에 div가 존재함
- top, left, bottom, right의 영향을 받음 ( 지정한 만큼 기존 위치에서 움직임 )
- 다른 요소들에 영향을 주지 않음
3. Absolute
absolute div에만 position:absolute, top: 50px, left: 50px을 준 상태
position: absolute의 경우에는 position:static을 가지고 있지 않은 div를 기준으로 위치가 변동됨
위의 경우에는 모든 div가 position: static 이기 때문에, absolute div가 가장 상위인 body를 기준으로 움직임
즉, body로부터 위 50px, 왼쪽 50px 떨어진 위치에 존재함.
- position : static이 아닌 div를 기준으로 움직임
- 모든 div가 position: static 이라면 body를 기준으로 함
4. Fixed
fixed div만 position:fixed, top: 20px, left: 20px을 준 상태
사실 이렇게 보면 position: absolute와 다른 점이 있나 싶지만,
스크롤이 있을 경우에는 확연히 차이가 난다는 것을 알 수 있다.
absolute의 경우에는 위치가 고정이 아니기때문에, 스크롤을 내릴경우 div가 같이 움직이지만
fixed의 경우에는 위치가 고정이기 때문에 스크롤을 내려도 div는 움직이지 않는다.
fixed 라는 이름에 맞춰 위치가 고정된다고 보면 된다!
그래서 위치가 항상 고정이 되어있는 TopnavigationBar, BottomNavigationBar에 자주 사용되는 position이다.
5. Sticky
position: sticky의 경우에는 들어보기만 하고, 따로 사용해보지는 않았었는데
요 포스트 쓰면서 어떤건지 궁금해서 한 번 찾아봤음
fixed와 비슷하게 스크롤시 지정한 위치에 고정한다는 점이 비슷했지만
sticky는 부모 요소 내에서를 기준으로 하고, fixed는 페이지 전체화면을 기준으로 한다는 점이 달랐다.
한 페이지 내에서 섹션별로 고정해야 하는 div가 다를 경우 sticky를 사용하지 않을까 싶다
(A-Z 알파벳 순으로 단어들을 나열할 경우라던지)
