Div與圖像被下一個div遮蔽

Question

我創建了一個div，其中包含一個圖像，其中包含覆蓋以下這些方向的大圖片的文字 - How to position text over an image in css。

但是，一旦我完成了下面的div與圖像滲入這個div。我究竟做錯了什麼。

HTML：

<div class="header-container"> 
     <header class="wrapper clearfix"> 
      <h1 class="title"><img src="img/ptmn_logo.gif" alt=""></h1> 
      <nav> 
       <ul> 
        <li><a href="#">On Stage</a></li> 
        <li><a href="#">Support</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </header> 
    </div> 
    <div class="main-container"> 
     <div id="bg"> 
      <img src="img/header.jpg" alt=""> 
      <p>This is your theater.</p> 
     </div> 
     <div class="main wrapper clearfix"> 

而CSS：

#bg { 
     position: relative; 
     top: -50%; 
     width: 200%; 
     height: 200%; 
     z-index: -1; 
    } 

    #bg img { 
     position: absolute; 
     display: block; 
     top: 0; 
     left: 0; 
     margin: auto; 
     min-width: 50%; 
     min-height: 50%; 
     z-index: 0; 
    } 

    #bg p { 
     position: absolute; 
     z-index: 100 
    } 

    .main { 
     position: relative; 
    } 

我感謝幫助！

Answer 1

看起來像這就是你需要的一切。我會擺脫所有其他風格，特別是任何利潤。您可以更改p元素的頂部和左側屬性，以調整其在header.jpg圖像上的位置。

img { 
    position: relative; 
} 
p { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

---

<header> 
    <img src="img/ptmn_logo.gif" alt="" /> 
    <nav> 
    <ul> 
     <li><a href="#">On Stage</a></li> 
     <li><a href="#">Support</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
</header> 
<img src="img/header.jpg" alt=""> 
<p>This is your theater.</p>