DOM 요소 CSS 값으로 겹치게 하기

Position

해당 DOM 요소를 배치하는 방법 지정할 때 사용.

relative

요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준 위치 속성 값에 따라 오프셋 적용

absolute

일반적인 문서 흐름에서 제거하고 공간 배정하지 않음 가장 가까운 위치 지정 조상 요소(상위 DOM의 position : relative 된 요소)에 대해 상대적으로 배치 상위 DOM에 없을 시 초기 컨테이닝 블록 기준. 위치 속성 값에 따라 오프셋 적용

z-index

위치 지정 요소, 그 자손 or 하위 플렉스 Z축 순서 지정 값이 클 수 록 작은 요소 위 덮음

쓰임새

하나의 컨테이닝 공간에서 각 요소들을 겹치게 하고 싶을 때 상위 컨테이너에 relative 값 지정 하위 컨테이너들에 absolute 및 z-index 지정으로 원하는 포지셔닝.

요약

• 요소를 겹치게 하고 싶을 때 relative, absolute, z-index.