Z- 인덱스가 작동하지 않습니다 (위치 지정 및 스택 컨텍스트 인식)

Question

Z- 인덱스에 문제가 있습니다. 나는 이미지를 iframe에있는 비디오 아래에 놓으려고합니다.

img 
{ 
    position:relative; 
} 

iframe 
{ 
    position:relative; 
    z-index: 2; 
} 

나는 여기에서 문제가되지 않는 위치와 스태킹 컨텍스트에 대해서만 팁을 얻었습니다 (물론 정확하게 생각한다면). 나는 약간의 도움에 감사 할 것이다!

편집이 IMG 및 iframe

<div id="main-menu" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <img src="images/logo/logo_biale_margins320.png" id="logo"/>  
    </div> 

    <section id="page-top" class="section-style" data-background-image="images/background/page-top.jpg"> 
     <div class="pattern height-resize"> 
      <div class="container" > 
        <center><h2 class="section-name"> 
         <span> 
          SHOVROOM<br/>available today! 
         </span> 
        </h2></center> 
        <h3><center> 
         Present Anything, Anywhere 
        </center></h3> 
       <br/><br/> 
       <header> 

        <center> 
             <iframe id="video" 
         src="https://www.youtube.com/embed/psraUPSYU28?rel=0" frameborder="0" allowfullscreen> 
        </iframe> 
        </center> 
       </header> 

Answer 1

다음 시간에 HTML의 부분 만이 질문에 관련 코드를 포함한다. 그들을 겹쳐지게하기 위해서 나는 다음과 같이했다.

position: absolute; 

준 색인이 작동하는 것 같습니다.

https://jsfiddle.net/JaredBledsoe/4v50bdwv/