[CSS] position: absolute인 element를 덮는 법 - z-index가 안 먹힐 때

TL;DR

앞쪽에 오는 엘리먼트에 position: relative를 주고 z-index를 조정한다

 

설명

 

이런 식으로 static box가 뒤에 있는 이미지의 일부를 가리는 레이아웃을 만든다고 가정해 보자.

이미지의 일부를 가리기 위해 이미지의 position을 기본값인 static에서 absolute로 변경했다.

position만 변경하면 이미지가 박스 위에 표시되기 때문에 box의 z-index를 더 높게 주었다.

그런데 기대했던 것과는 달리 z-index가 더 높은 회색 박스가 이미지 위에 오지 않는다

 

그럴 땐 static element에 position: relative를 줘서 해결하면 된다