z-index 와 position ( + z-index가 안먹히는 이유)

개요

z-index가 안먹혀서 찾아보니 position이 지정 안되어있으면 못쓰더라 라는 기본적인 사실을 이제서야 깨달아서 안 잊게 기록

z-index와 position

static

• 일단 모든 태그들은 처음에 position: static 상태
• 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.(Normal-flow)

absolute

• 부모 요소의 위치를 기준(position: relative, absolute를 가진 상위 태그) 에 따라 배치된다.
  • 부모 요소에 position이 지정 안되어 있을때(static일때)는 position을 가지고 있는 상위태그까지 올라간다.
• Normal-flow의 흐름에서 벗어난다.
• inline에 속성을 주면 자동으로 display:block이 된다.
• 부모의 기준 위치는 border는 제외하고 padding은 포함한다.

fixed

• 뷰포트(브라우저의 창)를 기준으로 offset(top,bottom,left,right) 에 따라 배치된다.(말 그대로 fixed)
• 부모의 위치에 영향을 받지 않는다.
• inline에 속성을 주면 자동으로 display:block이 된다.

relative

• 태그의 위치를 변경하고 싶을 때 사용하는 친구(offset 값으로 이동가능)
• 자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다.
• 부모의 position 속성에 영향을 받지 않는다.
• Normal-flow의 흐름에 따른다.

Normal-flow란?

일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)
예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말한다.

z-index

• position 값이 static이 아닌 경우 지정가능 (position값이 지정이 되어있어야 적용이 가능하다.)
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 큰 값이 가장 위쪽(음수 사용 가능)
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
  • 부모에게 z-index값을 줄 경우 부모끼리 먼저 z-index순위를 정한 뒤 자식이 적용된다. 즉, 자식의 z-index값이 아무리 높다 하더라도 부모의 값이 낮으면 위로 올라올 수 없다.
  • 자식들은 부모 내부에서만 우선 쌓임을 처리한 뒤 부모 내부 요소의 쌓기와 렌더링이 끝난 후에는, 루트 요소의 쌓임 맥락 하에서 전체 부모들의 쌓임이 이루어진다. (형제끼리)

z-index가 안 먹히는 이유?

1. 해당 element가 stack성질?을 갖고 있는가를 본다. 이 stack 특성이 없으면 z-index는 작동하지 않음

• position이 absolute, relative fixed sticky
• display: flex, display: grid이거나 자식요소
• opacity의 값이 1이외
• transform、filter、perspective、clip-path、mask、mask-image、mask-border의 값이 none이외

2. 부모의 z-index로 인해 이미 해당 element의 z-index는 결정 되었을수도 있다.

이게 무슨말이냐면 부모가 이미 z-index를 가지고 있으면 자식요소는 부모내의 요소들에서 z-index를 설정할 수 있지

부모의 밖의 영역에 관해서 z-index를 적용할 수 없다.

 

問題：アイコンが上の階層になっている

ここでは親の階層があって（z-index: 1）子の階層（アイコン、風船）もある

最初は子の間の階層を調整すればいいと思い込んでいたが、アイコン自体はそれぞれの親の階層に置いているので

子の間の調整ではできなかった。なのでおやのz-indexを消してやった

 

 

 

z-index렌더링에 좀더 자세한 기사는 아래를 참조

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

쌓임 맥락 - CSS: Cascading Style Sheets | MDN