CSS position 속성

position

CSS의 position 속성은 웹페이지에서 요소의 배치를 제어하는 데 중요한 도구이다.

문법

{
	position: static | relative | absolute | fixed | sticky;
}

1. static (기본값)

요소의 기본 위치 지정 방식입니다. 요소는 일반적인 문서 흐름에 따라 배치됩니다.

• top, right, bottom, left 속성의 영향을 받지 않습니다.
• z-index에 영향을 받지 않습니다.

2. relative

요소를 문서의 일반적인 흐름에 따라 배치한 후, 이를 기준으로 상대적으로 이동시킵니다.

• top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있습니다.
• 원래 위치는 문서 흐름(document flow)에서 유지됩니다.
• z-index가 적용되고 auto(0)가 아닌 경우 새로운 스택 컨텍스트를 생성합니다.

3. relative

가장 가까운 위치 지정 조상 요소(static이 아닌 position을 가진 요소)를 기준으로 위치를 설정합니다. 만약 그런 조상이 없으면 뷰포트를 기준으로 합니다.

• 문서 흐름(document flow)에서 제거되며 형제 요소에 영향을 미치지 않습니다.
• z-index가 적용되고 auto(0)가 아닌 경우 새로운 스택 컨텍스트를 생성합니다.

4. fixed

뷰포트를 기준으로 요소를 배치하며, 스크롤 시에도 고정된 위치에 유지됩니다.

• 문서 흐름(document flow)에서 제거됩니다.
• 항상 새로운 스택 컨텍스트를 생성합니다.

5. sticky

relative와 fixed의 혼합형입니다. 지정된 스크롤 임계값에 도달하기 전까지는 relative처럼 동작하고, 이후에는 fixed처럼 동작합니다.

• top, right, bottom, left 중 하나 이상이 필요합니다.
• 새로운 스택 컨텍스트를 생성하지 않습니다.
• css 브라우저 지원을 확인해야한다. caniuse=sticky

z-index 및 스택 컨텍스트와의 관계

position 속성은 요소의 스택 컨텍스트에 직접적인 영향을 미칩니다. 스택 컨텍스트는 요소들이 z축에서 쌓이는 방식을 결정합니다.

스택 컨텍스트 규칙

• 요소의 position이 relative, absolute, fixed 중 하나이고 z-index 값이 auto가 아닌 경우.
• 요소가 특정 CSS 속성(opacity < 1, transform, filter 등)을 가진 경우.

<div style="position: relative; z-index: 1;">
  부모
  <div style="position: absolute; z-index: 2;">자식 1</div>
  <div style="position: absolute; z-index: 1;">자식 2</div>
</div>

이 예시에서 자식 1은 z-index 값이 더 높기 때문에 자식 2 위에 표시됩니다.

overflow와의 관계

overflow 속성은 요소의 크기를 초과하는 콘텐츠를 처리하는 방식을 정의합니다. 이는 position 속성과 다음과 같이 상호작용합니다.

• overflow: clip; : 컨테이너의 overflow 속성은 컨테이너 내부의 위치 지정된 요소에 영향을 미칩니다.

• overflow: hidden; : 컨테이너가 overflow: hidden을 가지면, 절대 위치의 자식 요소가 부분적으로 또는 완전히 숨겨질 수 있습니다.

<div style="position: relative; width: 200px; height: 200px; overflow: hidden;">
  <div style="position: absolute; top: 250px;">클립된 콘텐츠</div>
</div>

자식 요소는 부모 요소의 경계를 초과했기 때문에 숨겨집니다.