콘텐츠 겹침

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