[html/css] flex와 z-index

flex와 z-index

---

배경

회사 동료 코드 리뷰 중 flex 요소의 자식의 경우 z-index가 동작하는 걸 발견함. 내가 알고 있는 상식과 달라 조사를 해봄.

예시: https://codepen.io/nuhends/pen/eYLOVaO?editors=1100

 

조사 및 결과

내가 알고 있는 상식은 어떤 요소에 z-index를 줬을 때 쌓임 맥락이 형성되려면 position속성의 값이 static(기본값)이 아니어야 한다. 그런데 flex 요소의 자식은 왜 동작할까? w3의 flex items 스펙을 살펴보자.

Flex items  paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).

⇒ flex item은 position이 static(기본값) 일지라도 z-index 값은 쌓임 맥락을 생성합니다. (마치 position realtive인 것처럼 행동함)

flex는 많은 인터페이스를 포함하고 있는 것 같다. 결론 flex는 편하다. 하지만 알고 쓰자!

 

 

참고

- W3의 flex items 스펙: https://www.w3.org/TR/css-flexbox-1/#painting