Div с изображением, скрытым следующим div down

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>