Div没有显示其下的任何元素

Question

为了节省您的时间，我将澄清我想用图像说的话

我的HTML

<div align="center"> 
         <div class="img-container">
         <div class="myconatiner">
          <h2>Headline</h2>
          <img src="img/image.png"> 
           <p>Caption</p>
         </div>
         </div>
        </div>

我的CSS

.img-container { width:100%; background-color:#59cbfc; position:absolute; right:0; left:0; vertical-align:central; }
.img-container h2 { float:left; padding:20px 0 0 0; max-width:500px; text-align:center; }
.img-container p { float:left; padding:10px 0 0 0; max-width:500px; text-align:center; }
.img-container img { float:right; width:500px; height:326px; padding-top:10px; bottom:0; }
.mycontainer { width:100%; max-width:1000px; height:auto; } 

问题在于，每当我放置任何元素或div时，它都不显示，因为它位于img-container div之下。

Answer 1

您无法看到.img-container下面的元素，因为它有position:absolute。这会导致div覆盖div后面的元素 - 即你在源代码中位于它下面的元素。

这个问题有两个简单的解决方案：

• 绝对position div下面的元素。
• 使用float或其他定位技巧在网页上定位div。这可能是更好的方法，因为height没有.img-container。示例如下所示。

CSS：

.img-container {
    width:100%;
    background-color:#59cbfc;
    vertical-align:central;
    float:left;
}

JS Fiddle example using float instead of position:absolute