position
position 속성은 웹 문서 상에 요소를 배치하는 방법을 지정합니다
<body>
<div class="yellow"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
static
오른쪽에 보이는 파란화면을 우리가 보는 웹페이지 라고 가정하겠습니다.
모든 웹 요소들은 기본적으로 postion값이 static 입니다.
static의 경우, css를 다음과 같이 작성하면, 노랑 파랑 초로순서로 쌓입니다.
relative
position 값이 static 일 때의 위치를 기준으로, 웹 요소들의 위치를 변경하고 싶을 때, 값을 relative로 설정합니다.
right 50px이 적용된 노랑 div는 static 속성일 때의 상태를 기준으로 오른쪽으로 50px 만큼 떨어져 있고
left 50px은 왼쪽으로 50px만큼 떨어져 있고
bottom 50px은 아래에서부터 50px만큼 이동된 것을 볼 수 있습니다.
absolute
absolute는 relative와는 다르게, position 값이 static이 아닌 부모를 기준으로 움직입니다.
position absolute 속성을 parent div 가 static일 경우와 그렇지 않을 때로 나누어 살펴보겠습니다.
yellow, blue, green div를 parent div가 감싸도록 수정해보겠습니다.
먼저 부모 div가 relativ일 경우입니다.
부모 div를 기준으로 오른쪽에서, 왼쪽에서, 아래에서 각각 50px만큼 떨어져 있는 것을 확인할 수 있습니다.
그럼 부모가 static이면 어떻게 될까요?
부모의 position 값이 static일 경우, absolute 속성은 postion이 static이 아닌 부모를 기준으로 움직이기 때문에,
부모인 parent div가 아닌 조상인 body를 기준으로 top,bottom, reight, elft값이 적용되는 것을 확인할 수 있습니다.
fixed, sticky
스크롤이 가능한 웹페이지라 가정하고,
노랑색 div의 position 값은 sticky로 주고, 파랑색 div의 position값을 fixed로 주겠습니다.
스크롤을 내리면서 확인 해보면, 스크롤을 아무리 내리더라도 파랑색 div는 left 50px의 동일한 위치에 표시되지만, 노랑색 div는 부모 div를 따라서 올라갑니다
sticky와 position은 모두 스크롤할 때 요소를 고정시킬 수 있는 기능을 제공하는 공통점이 있지만,
sticky속성을 적용한 div는 스크롤을 계속 내리다가 부모 요소의 마지막까지 도달하면 해당요소도 스크롤에 따라 움직이지만, fixed속성을 적용한 div는 스크롤을 내려도 같은 위치에 있게 되는 차이점이 있습니다.
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > css' 카테고리의 다른 글
| css - display (0) | 2023.06.08 |
|---|---|
| flexbox (0) | 2023.03.28 |
