[CSS][Layout][Positioned Layout][Stacking Contexts : 쌓임 맥락]

Q : 브라우저는 어떻게 요소들이 쌓이는 순서를 결정할까?

2단계 프로세스로 생각할 수 있습니다.

1. 먼저 위치가 지정되지 않은 모든 요소가 렌더링됩니다(Flow, Flexbox, Grid...).
2. 다음으로, 위치 지정 요소가 맨 위에 렌더링됩니다 (relative, absolute, fixed, sticky).

플로우 레이아웃 : 겹치지 않는다. 음수 마진을 사용하면 나중 순서가 위에 온다.

플로우 레이아웃은 레이어링을 위한 모드가 아니다.

컨텐츠랑 배경은 별개로 취급된다.

Border와 배경색은 뒤에 배경으로 그려진다. 그 위에 컨텐츠가 떠있는 모습을 볼 수 있다.

<style>
  .box {
    width: 50px;
    height: 50px;
    border: 3px solid;
    background: silver;
    font-size: 2rem;
    text-align: center;
  }
  
  .second.box {
    margin-top: -30px;
    margin-left: 20px;
    background: pink;
  }
</style>

<div class="first box">
  A
</div>
<div class="second box">
  B
</div>

 상대 레이아웃 모드를 사용하면, 상대 요소가 항상 정적 요소보다 먼저 그려진다.

위와 다른 부분은 단 하나다.

A

B

  .first.box {
    position: relative;
  }

 

둘다 상대 위치면 돔 순서가 이긴다.

<style>
  .box {
    position: relative;
  }
  /*
    Repeated decorative styles
  */
  .box {
    width: 50px;
    height: 50px;
    border: 3px solid;
    background: silver;
    font-size: 2rem;
    text-align: center;
  }
  .second.box {
    margin-top: -20px;
    margin-left: 20px;
    background: pink;
  }
</style>

<div class="first box">
  A
</div>
<div class="second box">
  B
</div>

요약

• 모든 형제가 Flow 레이아웃에서 렌더링될 때 DOM 순서는 배경 요소가 겹치는 순서를 결정한다. 콘텐츠는 항상 앞쪽으로 떠 있다.
• 한 형제가 위치 지정 레이아웃을 사용하는 경우 DOM 순서에 관계없이 위치가 지정되지 않은 형제 위에 표시됩니다.
• 두 형제 모두 위치 지정 레이아웃을 사용하는 경우 DOM 순서는 어떤 요소가 맨 위에 올 것인지 제어합니다.
  • Flow 레이아웃과 달리 콘텐츠가 앞으로 뜨지 않습니다.

Z-index

해당 속성을 통해 인위적으로 렌더링 순서를 지정할 수 있다.

첫번째 box가 z축으로 더 위로 지정되어 먼저 보이게 된다.

A

B

<style>
  .box {
    position: relative;
  }
  /*
    Repeated decorative styles
  */
  .box {
    width: 50px;
    height: 50px;
    border: 3px solid;
    background: silver;
    font-size: 2rem;
    text-align: center;
  }
  .second.box {
    margin-top: -20px;
    margin-left: 20px;
    background: pink;
  }
  .first.box {
    z-index: 2;
  }
  
  .second.box {
    z-index: 1;
  }
</style>

<div class="first box">
  A
</div>
<div class="second box">
  B
</div>

z인덱스는 z축 좌표다. 플로우 레이아웃엔 적용되지 않는다.

기본 설정은 auto(=0)이다.

z인덱스는 Z축좌표다.

• x is left/right
• y is up/down
• z is forward/backward

z-index는 음수도 가능하지만 사용을 지양하자.

쌓임 맥락

쌓임 맥락 - CSS: Cascading Style Sheets | MDN (mozilla.org)

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

쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. 
Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다.
각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.
중요한 것은, 자식의 z-index 값은 부모에게만 의미가 있다는 점입니다.
하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.
형제 끼리는 자기들 간의 쌓임 맥락 하에서 쌓이는 순서가 결정됨.

My Cool Site

A tooltip

Some main content

<style>
header {
  position: relative;
  z-index: 2;
}

main {
  position: relative;
  /*
    Toggle this property to
    create/destroy the stacking
    context
  */
  z-index: 1;
}

.tooltip {
  position: absolute;
  z-index: 999999;
}



/* These styles are purely cosmetic */
body {
  background: #eee;
}

header {
  height: 60px;
  line-height: 60px;
  background: pink;
  text-align: center;
}

main {
  padding: 32px;
}

.tooltip {
  top: -12px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  width: 90px;
  text-align: center;
  padding: 8px;
  background: white;
  box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.25);
  border-radius: 6px;
}
</style>
<header>
  My Cool Site
</header>
<main>
  <div class="tooltip">
    A tooltip
  </div>
  <p>Some main content</p>
</main>

왜 툴팁이 z-index가 큰데 아래에 쌓일까?

main과 header는 자신의 position과 z-index로 인해 각자의 쌓임 맥락을 형성한다.

main과 header는 root 안에서 쌓임 맥락이 고려되며,

툴팁은 header내의 쌓임 맥락 내에 존재한다.

예를 들자면 header는 버전 2고, main은 버전 1이다. 

툴팁은? 1.999999인 것이다.

 

툴팁을 위에 쌓으려면, main이 쌓임 맥락을 형성하지 않으면 된다. 

그러면 툴팁과 헤더를 직접 비교하게 된다.

<style>
header {
  position: relative;
  z-index: 2;
}


.tooltip {
  position: absolute;
  z-index: 999999;
}



/* These styles are purely cosmetic */
body {
  background: #eee;
}

header {
  height: 60px;
  line-height: 60px;
  background: pink;
  text-align: center;
}

main {
  padding: 32px;
}

.tooltip {
  top: -12px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  width: 90px;
  text-align: center;
  padding: 8px;
  background: white;
  box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.25);
  border-radius: 6px;
}
</style>
<header>
  My Cool Site
</header>
<main>
  <div class="tooltip">
    A tooltip
  </div>
  <p>Some main content</p>
</main>

 

참고 :

https://github.com/andreadev-it/stacking-contexts-inspector

GitHub - andreadev-it/stacking-contexts-inspector: Documentation and source for the CSS Stacking Contexts Inspector devtools ext