[CSS] z-index

CSS의 z-index는 지정한 요소와 그 요소의 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정한다.

z-index는 하나의 정수값(음수, 양수 모두 가능)을 가질 수 있으며,

더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.

예를 들어 -1과 4의 값을 가진 요소가 있을 경우, 4를 가진 요소가 더 위에 위치한다.

즉, 화면에서 4가 -1을 덮고,(cover) 더 위에 보이게 된다.

※ 주의: z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.

기본 렌더링 레이어는 0이며,

값을 지정하지 않을 경우 기본 렌더링 레이어(레이어 0)에 렌더링된다.

만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지거나,(같은 렌더링 레이어에 위치)

모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.

자세한 사항은 아래 문서 참고

z-index가 없는 경우의 쌓임 - CSS: Cascading Style Sheets | MDN

z-index가 없는 경우의 쌓임 만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다. 뿌리 엘리먼트의 배경과 테두리 자식 엘리먼트들은

developer.mozilla.org

참고하면 도움이 되는 문서들

z-index 적용 - CSS: Cascading Style Sheets | MDN

z-index 적용 처음 예제에서(z-index가 없는 경우의 쌓임) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 position 속성을 지정하고 z-i

developer.mozilla.org

z-index - CSS: Cascading Style Sheets | MDN

z-index CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. The source for this interactive example

developer.mozilla.org

[CSS] position(static, relative, absolute, fixed, sticky) (0)	2021.04.09
[CSS] background-repeat (0)	2021.04.09
[CSS] hover 시 이미지 커지게 하기 (0)	2021.04.09

소꿍의 코딩 걸음마