코드랩 레퍼런스

z-index 본문

CSS

z-index

webstoryboy 2016. 6. 25. 15:45
z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다.

Summary

특징 설명
기본 값 auto
상속 안됨
애니메이션 가능
버전 CSS2

Definition

  • z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다.
  • z-index는 음수(-)도 설정 할 수 있습니다.
  • z-index는 숫자가 높을수록 위로 올라옵니다. 99999까지만 설정할 수 있지만, 그 이상도 작동은 합니다.
  • z-index를 적용하지 않은 경우는 CSS 우선순위에 따라 나중에 설정한 속성이 위로 올라옵니다.
  • z-index는 요소의 위치가 겹쳤을 때 적용하기 때문에 position 값을 설정해야합니다.

Syntax

z-index : auto | number | inherit;

Property

속성 값 설명
auto z-index의 값을 자동으로 설정합니다.
number z-index의 값을 숫자를 통해 설정합니다.
inherit z-index의 값을 상위요소한테 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
z-index

Sample

box1
box2
box3
box4
box5
box6






Ad

Comments