[짧게 정리하는 CSS] 4가지 포지셔닝

CSS 포지셔닝이란?

---

• HTML의 엘리먼트 위치를 제어하는 방법
• 레이아웃을 설계하는데 중요한 속성

 

 

포지셔닝의 4가지 종류

---

: CSS의 position을 지정하여 위치를 지정할 수 있다.

 

1. static

• position속성의 기본값
• 엘리먼트 나열 순서대로 배치

 

2. relative

• 부모 엘리먼트를 기준으로 위치가 정해짐

 

3. absolute

• 부모 엘리먼트 중에 relative타입이 지정된 부모를 기준으로 위치가 정해짐
• 부모 엘리먼트와 연결성이 끊겨 해당 엘리먼트는 자신의 컨텐츠 크기만 해짐
• 부모 엘리먼트 또한 자식 엘리먼트를 없는 셈 친다.

 

4. fixed

• absolute와 같이 자신의 컨텐츠 크기가 된다는 점
• 특정한 엘리먼트를 화면에 고정시켜서 스크롤로부터 완전히 독립

 

 

 

 

[참고자료]

---

https://opentutorials.org/course/2418/13414