[ Rendering Logic2 ] stack context - z-index/ portal

해당 글은 css josh강의를 요약 정리한 것 입니다.

Stack Context 

브라우저 요소가 겹칠 떄 맨위에 렌더링 될 요소를 결정하는 방법은?

=> 레이아웃 모드에 따라 다르다! 
=> FLOW 레이아웃 모드에서는 Nagative margin으로 강제할 수 있다. 

 

아래 예시를 보면 

Margin top의 음수를 줌으로써 겹쳐지는 것을 확인 할 수 있다. 

하지만 이는 DOM순서에 따라 변경이 되는 확인 할 수 있다. 

 

만약 회색상자에 텍스트를 추가하면 어떻게 될까요? 글자는 핑크 박스 뒤에 갈까요?

아니면 앞으로 떠있는 형태로 될까요? 

 

확인해보면 텍스트는 맨위에 떠있는 것을 확인할 수 있습니다. 

그 이유는 ? 

Flow layout 자체는 레이어링을 염두해두고 만들지 않았습니다!  따라서 이를 해결하기 위해서는 position : relative 지정이 필요합니다!

 

 

여기서 알 수 있는 사실 

- position이 지정된 요소는 지정되지 않은 것보다 위에 렌더링 된다. (Flow, Flexbox, Grid 다)

- 만약 겹친 여러 요소가 둘다 position이 지정되어 있다면? DOM순서가 뒤일 수록 이김 ! 

 

*** stack context를 정리하자면 
1. 모든 sibing요소가 flow 레이아웃에서 렌더링 될 때 배경 요소가 겹치는 것은 제어하지만 콘텐츠는 항상 앞으로 떠있음 
2. position레이아웃을 사용하는 경우 DOM 위치와 상관없이 position이 지정된 sibing요소가 위에 표시 됨 
3. 두 Sibing 요소가 둘 다 position layout을 가지고 있다면 Dom요소가 맨위의 요소의 위치를 결정한다!  

사실 여기까지는 기본 동작 방식입니다!

이제 CSS z-index를 통해 이를 제어해 봅시다!

(기본 동작을 이해하고  z-index속성을 사용해봅시다! )

 

Z-index 

레이어드 된 DOM요소를 z-index 속성을 사용하여 수동으로 재정렬 할 수 있습니다.  

-  Z index는 position이 지정된 곳에서만 작동합니다. 

-  Flow 레이아웃의 렌더링되는 요소는 영향을 미치치 않습니다!

- Z-index 속성은 기본값은 0입니다! 

 

Nagative z-index

z-index 의 값은 음수도 가능합니다!

하지만 이는 이점을 제공하지 않고 복잡성을 유발하기 떄문에 사용하지 않는 것을 권장합니다! 

 

stack contexts를 생성하는 다른 방법

z-index 속성만 stack contexts를 결정하지는 않는다. 

아래의 여러가지 stacking context를 생성하는 방법이다.

• opacity 1보다 작은 값으로 설정
• position : fixed / sticky 로 설정해라
• z-index 내부에 자식요소들에 display : flex / display : grid를 설정해라
• isolate : isolate 명시적으로 컨택스트 만들어라 
• Transfrom, filter, clip-path, perspective속성을 사용해라

 

아무리 z-index를 높게 설정해도 제일 상단에 올라오지 않는 다면? 
=> stack context 디버깅 확장 프로그램인 stacking-contexts-inspector를 사용하자 !! 
(https://github.com/andreadev-it/stacking-contexts-inspector
크롬과 파이어 폭스만 가능합니다! 
)

 

이제....z-index Managing하는 주제로 넘어가보면...

(조쉬는 Z-index만으로 1시간도 떠들 수 있을 듯 대단타....)

 

Managing Z-index 

z-index를 사용하다보면 z-index를 더 높게 주기 위해서 숫자가 무진장 높아진 경험이 있을 것입니다. 

(z-index인플레이션...이라고 표현합니다)

 

이를 해결하는 몇 가지 전략이 있습니다! 

 

DOM 순서 변경하기 

z-index를 사용하여 카드와 장식과 래퍼를 배치한다고 가정해보자! 

<style>
  .wrapper {
    /* Create a containing block */
    position: relative;
  }
  .card {
    position: relative;
    z-index: 2;
  }
  .decoration {
    position: absolute;
    z-index: 1;
  }
</style>
<div class="wrapper">
  <div class="card">
    Hello World
  </div>
  <img
    alt=""
    src="/decorative-blob-1.svg"
    class="decoration"
    style="top: -20px; left: -70px;"
  />
  <img
    alt=""
    src="/decorative-blob-2.svg"
    class="decoration"
    style="top: -50px; left: -10px;"
  />
  <!-- Other blobs omitted for brevity -->
</div>

하지만 이는 DOM 순서로 제어가 가능하기 때문에 z-index를 사용할 필요가 없습니다!

 

z-index를 지정하지 않으면 DOM순서로 위치를 지정하기 때문에 Card가 제일 위에 그려집니다. 

하지만, 이는 주의해야합니다. 장식이미지라 DOM위치의 요소가 영향을 미치지 않지만, 링크 버튼 입력 같은 것은 순서가 변경되면 사용자 경험에 혼란을 줍니다! (tab을 통한 위치변경 등.)

 

Isolated Stacking contexts

위의 카드는 flexbox를 사용하여 UI렌더를 할 수 있지만 DOM순서에 따라 스택됩니다!

하지만 이는 DOM순서로 조작이 불가능 합니다! 

<style>
  .card {
    position: relative;
    z-index: 1;
  }
  .primary.card {
    z-index: 2;
  }
</style>
<section class="pricing">
  <article class="card">
    <!-- Stuff omitted -->
  </article>
  <article class="primary card">
    <!-- Stuff omitted -->
  </article>
  <article class="card">
    <!-- Stuff omitted -->
  </article>
</section>

이렇게 하면 가운데 요소가 가장 앞에있는 것처럼 보이게 할 수 있겠지만 뭔가 이상한 점이 생깁니다!

보면, z-index를 둠으로써 Header card가 header를 넘어가는 것을 확인할 수 있습니다!

이러한 것을 해결해 주는 속성시 isolate 입니다!

이러한 문제를 해결하기위해서 해당 속성을 isolate stack context를 만들어야합니다!

이러한 방법은 전체 카드에 isolate : isolate 속성을 지정하는 것입니다.

 

카드 전체를 감싸는 div태그 속성에 isolate를 줌으로써 다른 요소와의 버그가 생기지 않도록 보장이 되기 때문에

이 속성을 잘 사용하는 것을 강력 추천합니다!!!

isolate 속성은 explore에서는 지원하지 않습니다