Video태그가 z-index를 무시하고 자꾸 기어올라오네?

제목그대로...

    <div class="video-box">
        <video class="video-container" autoplay muted loop>
            <source src="./video.mp4" type="video/mp4"> 
        </video>
        <h3 class="video-title">London!</h3>
    </div>

.video-box {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
}

.video-container {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:0;
}

h3 {
  font-size: 1.5rem;
  color: blue;
}

나는 비디오를 배경으로한 박스를 원했다.. 그래서 위같이 css를짜고 테스트를해봣다.

내 당시 생각의 흐름은

1. video-box에 position을 줬잖아
2. 그 자식요소인 video-container에 absolute를 줫지? 또 붕뜨겟네? 그다음 요소는 z-index만 조절해주면 내맘대로 되겟네?
3. 됫겟지 ㅎㅎ?
4. 음?

대놓고 안된다 .. z-index를 아무리 크게크게 조절해봐도 h3태그를 비디오 배경위로 띄우는걸 실패했다.
바~~~로 구글링 들어갔다

video z-index라고 쳐보니 흥미로운 글을 발견했다

https://erwinousy.medium.com/z-index%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0-4%EA%B0%80%EC%A7%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EA%B3%A0%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95-d5097572b82f

z-index가 동작하지않는 이유 4가지

대놓고 노골적인 제목이다..

이유가 4가지가 있엇는데 4가지 전부다 궁금한사람은 링크로 들어가면 될거같다..

내가이해한바로는! (이해가 잘못됫다면 항상 키엘리니끕 태클 부탁한다)

1. Natural stacking order

   해석그대로 자연스럽게 쌓이는 순서가있다는거다 그냥 코드블럭 순서대로 쌓인다고 이해했다.

   <div>A</div>
   <div>B</div>
   <div>C</div>

   A B C 3박스는 순서대로 쌓이고(이건알지) position을 주면 안준 요소들보다
   무조건 위에 위치한다고 한다. (이것도 알지)

   B에 position을 주면 A,C는 밑에 깔리고 B가 붕뜰거다.

근데여기서 C에 transform을 준다면?

글에따르면 transform이나 opacity를 주면 동작원리에 따라서,
또 새롭게 stacking context에 놓이게 된다고 한다.

한마디로 또 붕뜬다는 소리같다. 그러니 C가 transform을줘서 붕 떳으니
position을 준 B위에 transform으로 뜬 C가 떠서 보인다는 뜻같다.

(그래서 video-container가 transform으로 또 붕 떳기때문에 video-box에 있는 h3태그가 안보였던것같다)

그럼 나는 h3태그를 붕 띄우고싶은데? ............

결론이다

결국 h3태그 역시 또 붕띄우면된다 h3태그에도 position을 주니까 해결됫다. 천하제일 붕띄우기다

(근데 벨로그 html 태그들 쓰면 미리보기랑 출간이랑 다른것같네,, 흠,,)