본문 바로가기

위클리 페이퍼

2. position의 속성들과 각각의 특징

- static은 기본값이며 요소가 원래 있어야 할 위치에 배치시킨다.

- relative는 원래 있어야 할 위치를 기준으로 위치를 조절할 수 있다. 자리를 움직여도 다른 요소는 위치에 영향을 받지 않는다.

- absolute는 가장 가까이 포지셔닝 된 조상 요소를 기준으로 위치를 조절할 수 있다. absolute가 적용이 되면 기존 차지했던 영역을 잃어버려 다른 요소가 그 자리를 채울 수 있다. 영역을 잃게되면서 크기도 잃게된다.

- fixed는 브라우저 화면을 기준으로 위치를 고정시킨다. absolute와 마찬가지로 기존의 영역을 잃어버리게된다.

- sticky는 브라우저 화면을 기준으로 사용자가 설정한 위치에 도달하게 되면 그곳에 고정이 된다. 자신의 영역을 차지하고 있으며 자신의 부모요소가 화면에서 벗어나게 되면 자신도 벗어나게 된다.

'위클리 페이퍼' 카테고리의 다른 글

6. JavaScript에서 얕은 복사와 깊은 복사  (0) 2023.11.01
5. 자바스크립트 ==과 ===의 차이  (0) 2023.11.01
4. git flow 브랜치 전략  (0) 2023.10.28
3. merge의 종류  (0) 2023.10.28
1. CSS에서 Cascading이란?  (0) 2023.10.19