[HTML/CSS] z-index 속성 - 요소 배치 순서 변경하기

오늘은 z-index에 대한 글이다.

 

---

 

[ z-index란? ]

• 요소를 원하는 순서대로 배치할 수 있게 한다.
• 숫자가 작을수록 상단에 배치된다.
• position속성의 absolute일 경우에만 사용된다.

 

[ 예제 ]

현재 아래 사진을 보면 텍스트만 보이는 것을 확인할 수 있다.

하지만 텍스트 아래에는 이미지 한장이 겹쳐져 있다.

해당 이미지(클래스명 front)를 가장 앞으로 나오게 z-index에 1을 주면 결과는 아래 사진과 같다.

텍스트만 보이는 상황 (적용 전)

.front {
    z-index: 1; /* 앞으로 당기기 */
}

이미지가 앞으로 나온 상황 (적용 후)

 

---