웹 프로그래밍 css(33) z-index

🔥오늘의 목표🔥

요소의 위치를 지정하다보면 요소가 겹쳐지게 되는 경우가 있다. 
이때 어떤 요소가 우선되서 앞으로 배치될지를 결정하는 z-index에 대해서 알아보자.

📕 z-index

• 요소가 겹치는 순서를 지정하는 속성이다.
• 단위없이 숫자로만 선언한다. (음수 사용 가능)
• 가장 큰 값이 가장 위쪽에 온다.

z-index: auto | number | initial | inherit;

📒 속성값

• auto : 쌓임 순서를 부모와 동일하게 설정(기본값)
• number: 해당 수치로 쌓임 순서를 설정(음수 허용)

🔸특징

• position값이 static이 아닌 경우에 지정가능하다.
  position값이 static일 때 z-index을 지정하더라도 적용되지 않는다.

• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임

• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
  한 요소의 z-index의 값이 높더라도 부모요소끼리 z-index값을 가질 때 넘어설 수 없다.
  자손의 z-index를 자기 외의 바깥 요소와 비교하지 않습니다.
  -> 부모의 z-index를 잘 신경써야한다.

더 알아보기

🏅오늘의 목표🏅

z-index는 position이랑 같이 자주 쓰인다고 한다.
잘 알아두자. 그런데 나는 프론트 개발자를 하고 싶은걸까? 음 그건아님