Question

我有一些与其他内容重叠的内容。这是HTML和CSS：

HTML：

<div class="image_block">
  <a href="#"><img src="src.png" alt="July 4th" usemap="#Map" border="0" /></a>
    <map name="Map" id="Map">
      <area class="declaration " shape="poly" coords="109,255" href="#" />
      <area class="constitution" shape="poly" coords="145,253" href="#" />
    </map>  
</div>
<p style="clear:both;">&nbsp;</p>

<!-- This content is coming over the image -->

<p><a href="/home"><img class="center" style="width:185px;" src="src.png" />
</a></p>
<p>&nbsp;</p>
<div id="copyright"><p>Copyright &copy; 2012</p></div>

CSS：

.image_block    {
   width: 710px;
   height: 500px;
}

.image_block a  {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0px;
}

.image_block img    { 
  /* Nothing Specified */

}

如何防止内容重叠？

注意：我不介意更改CSS，只要图像保持在屏幕底部的中心，就像这里提供的CSS一样。

Answer 1

当您说position: absolute;时，它不会考虑您网页中的其他内容，而只会考虑屏幕中的位置。如果你想摆脱重叠，你必须遵循相对定位并使用CSS的float属性。

即。

.image_block a  {
  width: 100%;
  text-align: center;
  clear: both;
  float: left;
  bottom: 0px;
}

Answer 2

尝试替换

.image_block a  {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0px;
}

内容重叠

2 个答案: