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

あなたが言うときposition: absolute;、それはあなたのウェブページの他のコンテンツを考慮せず、画面上の位置だけを考慮します。重複を取り除きたい場合は、相対的な位置付けに従いfloat、CSSの属性を使用する必要があります。

すなわち

.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;
}