CSS 레이아웃 - position 속성

CSS 포지션(position) 속성

태그들의 위치를 결정하는 CSS

정적, 상대적, 고정, 절대 또는 고정을 지정

• static
• relative
• absolute
• fixed
• sticky

position속성을 설정 한 후 top, right, bottom, left 속성을 사용해 위치 조절이 가능.

 

static (기본값)

- 일단 모든 태그들은 처음에 position: static (정적으로 배치) 상태. (기본적으로 static이라 따로 써주지 않아도 됨.)

- 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

- static을 사용하면 top,right, bottom, left를 설정해도 적용되지 않는다.

 

relative

태그의 위치를 변경하고 싶을때 position: relative를 사용

이후 top, right, bottom, left 속성을 사용해 위치 조절이 가능.

기존에 자리를 잡던 위치를 기준으로 위치를 잡는다. (상대적인 위치)

방향으로 주어진 px만큼 이동.

 

absolute

가장 가까운 위치에 있는 조상과 관련해 배치됨.

문서 전체를 기준으로 위치를 잡는다. (절대적인 위치)

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면 ,

absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임.

 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨.

• 절대위치 요소에 조상이 배치되어 있지 않으면 문서 전체기준에 움직인다.

 

fixed

특정위치에 고정되어있게 하는 position.

스크롤을 내려도 항상 같은 위치에 유지

 

sticky

with 요소 position: sticky는 사용자의 스크롤 위치를 기반으로 배치됨

뷰포트에서 지정된 오프셋 위치가 충족될 때 까지 상대적 위치에 배치 된 다음 위치에 고정됨.

 

---

참고 : Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다 (아래 예 참조). 또한 중 하나 이상 지정해야합니다 top, right, bottom또는 left끈적 위치가 작동 할 수 있습니다.

---

 

전체기준이 아닌 부모를 기준으로 위치를 잡고 싶을 때

부모가 relative이고 자식이 absolute라고 생각한다.

하위 class를 감싸고 있는 상위 class에 relative를 적용하고

하위class에 absolute로 적용하면 , 해당 하위 class가 absolute임에도 불구하고 문서 전체가 아닌 relative속성을 가진 부모(상위) class를 기준으로 위치를 선정하여 부모위치를 기준으로 위치를 잡게된다.

 

absolute와 relative가 만나면 상대적으로 절대적인 위치를 잡는다.

 

---

 

겹치는 요소

요소가 배치되면 다른 요소와 겹칠 수 있다.

z-index 속성으로 요소의 스택 순서를 지정할 수 있다. (요소는 다른 요소의 앞에 또는 뒤에 있어야한다.)

요소는 양수 또는 음수 스택 순서를 가질 수 있다.

더 큰 스택 순서를 갖는 요소는 항상 스택 순서가 낮은 요소 앞에 위치!

---

참고 : 두 개의 배치 된 요소가 z-index 지정 없이 겹치면 HTML 코드의 마지막에 배치 된 요소가 맨 위에 표시됩니다.

---