>
내 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
  • 답변 # 1

    z-index  위치 지정된요소의 z 순서를 설정합니다. 요소를 배치하려면 기본값 인 static 이외의 위치 값이 필요합니다. 제목이 정적 위치 지정을 사용하므로 z-index  적용되지 않습니다.

    특정한 경우 위치를 relative 로 변경하고 싶을 것입니다 .

    .blurred-container .content h1,
    .blurred-container .content h2 {
        position: relative;
        z-index: 2;
    }
    
    

  • 이전 node.js - 스트림 처리 지연 항목 변환
  • 다음 google maps - KML 파일에 맞춤 ExtendedData를 표시하려면 어떻게해야하나요?