html - z- 색인을 사용한 후에도 텍스트가 컨테이너 위에 흐리게 표시되지 않습니다

내 pyzwyz  그리고 h1  텍스트가 어디에 있어야하는지 표시하지 않습니다 : 내 컨테이너 위에. 어떤 이유로 든 알아낼 수없는 이유로 흐리게 컨테이너 뒤에 숨겨져 있습니다.

h2 를 배치 한 후에도  내 z-index: 2 내부  css 내 콘텐츠는 실제로 숨겨져 있으며 이유를 모르겠습니다.

.blurred-container .content h1

이 텍스트를 <style> .blurred-container { position: relative; display: flex; justify-content: center; align-items: center; background: url("https://images.unsplash.com/photo-1565361587753-6c55978411d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"); background-size: cover; background-attachment: fixed; height: 100vh; } .blurred-container .content { position: relative; overflow: hidden; box-shadow: 0 5px 32px rgba(0, 0, 0, 0.5); padding: 0; max-width: 600px; background: inherit; border-radius: 12px; } .blurred-container .content::before { content: ""; position: absolute; left:-20px; right:-20px; top:-20px; bottom:-20px; background: inherit; filter: blur(20px); } .blurred-container .content h1 { z-index: 2; } .blurred-container .content h2 { z-index: 2; } </style> <div class="blurred-container"> <div class="content"> <h1>CONTENT</h1> <h2>content</h2> </div> </div> 에 넣고 싶습니다  그리고 h1  볼 수 있습니다. 내가 뭘 그리워 했어? 미리 감사드립니다. 도움이되면 여기에 코드 펜이 있습니다

h2