Z索引不起作用（定位和堆棧情境感知）

Question

我有Z指數的問題。我嘗試使圖像位於iframe中的視頻下。

img 
{ 
    position:relative; 
} 

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

我尋找答案，只得到了大約在這裏是沒有問題的（如果我認爲正確的路線）的位置和堆疊上下文的提示。我會欣賞一些幫助！

編輯HTML的這個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

下一次 部分，只包括是有關這個問題的代碼。爲了讓它們重疊，我做了以下。

position: absolute; 

你給的z-索引似乎正在工作。

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