1908 stacking context를 잘못이해하고 사용해서 생긴 issue.md

Issue: stacking context를 잘못이해하고 사용해서 생긴 issue

상황:

글자 뒤에 background와 border radius를 사용하여 만든 원을 삽입하여 header를 만드는 과정에서 stacking context상으로 분명히 글자 뒤로 도형이 가야하는데 가지 않던 이슈

생각해낸 방안:

• z-index 주기
• 두 원소 다 positioned한 상황인지 확인

방안: z-index 주기 (실패)

쌓임 맥락이 먹지 않으니, 이 방법도 제대로 작동하지 않을 거라고 생각했다.

역시나....

    참조:
    https://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as-the-background-with-css
    https://stackoverflow.com/questions/15986216/how-can-i-add-a-large-faded-text-background-via-css

방안: (성공)

내 구조는 아래와 같았다.

<div>
  <circle>
  글자글자
</div>

부모 요소에는 relative가 먹혀있었고, circle에 absolute를 준 후 고민 중이었는데, 이때 글자글자를 span, div로 둘다 감싸보기도 하고 부모 요소의 ::before로 줘보기도 했다.

이 과정에서 z-indx 공식문서를 확인하는데 적용대상 positioned elements라는 부분이 보였다.

혹시나하여 글자가 있는 태그에 positioned를 해줬더니 원하던 쌓임맥락이 제대로 작동하였다.

즉 부모 요소 안에서는 positioned 된 요소는 또 그 요소끼리 쌓임맥락을 다투게 된다

    참조:
    https://developer.mozilla.org/ko/docs/Web/CSS/z-index
    https://css-tricks.com/almanac/properties/z/z-index/