0

为了节省您的时间，我会用图片阐明我想说的 图片

我的 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-containerdiv 下。

4

1 回答 1

1

您看不到下面的元素，.img-container因为它具有position:absolute. 这会导致 div 覆盖 div “后面”的元素 - 即您在源代码中放置在它下方的元素。

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

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

CSS：

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

JS Fiddle 示例使用float而不是position:absolute.

于 2013-03-29T16:11:56.913 回答