html - 内容重叠

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

尝试用这个替换

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

Answer 2

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

IE

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