内容重叠

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;它没有考虑你的网页上的其他内容，但只是在屏幕上的位置。如果你想摆脱重叠，你将不得不遵循相对定位并使用CSS的float属性。

即

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