슬라이드 쇼가 바닥 글에 겹치다

나는 반응이있는 페이지에서 작업하고 있지만 여기서는 검색 기능을 포함하여 모든 것을 시도했지만 바닥 글은 내용/슬라이드 쇼 아래에서 계속 움직입니다. 내가 도대체 뭘 잘못하고있는 겁니까?슬라이드 쇼가 바닥 글에 겹치다

<div id="wrapper"> 
<div id="content"> 

    <div class="slideshow"> 
     <img src="img/1.JPG" width="850" /> 
     <img src="img/2.JPG" width="850" /> 
     <img src="img/3.JPG" width="850" /> 
    </div> <!-- Ends Slideshow --> 

</div> <!-- Ends Content --> 

<div id="footer"> 
</div> 
</div> 

Style-sheet: 

#wrapper { width: 900px; margin: 0 auto 0 auto; } 
#content { padding: 20px 30px 0 30px; height: auto; } 
.slideshow { position:relative; height:auto; max-width: 100%; margin-bottom: 10px; } 
.slideshow img { max-width:100%; height: auto; } 
#footer { padding: 20px 0 0 0; }

출처

2014-12-05 n_ck

나는 그 코드와 중복 표시되지 않습니다. 참조 : http://jsfiddle.net/0qe47o5e/ –

감사합니다. 현재 코드와 일치하도록 Jsfiddle을 업데이트했습니다. http://jsfiddle.net/0qe47o5e/1/ –

해결되었습니다. 내 대답보기 (업데이트 됨). 좋은 하루 되세요. –

절대 요소가 정의에 의해 그렇게하지 않기 때문에 절대 요소가 페이지에 공간을 차지하게 할 방법이 없습니다. 그러나 수정하려면 #content 높이를 제공 할 수 있습니다.

당신이 당신의 absolute 위치 요소에 어떤 높이를 볼 수 없습니다 당신의 #contentheight:auto 때문에 height:450px;를 추가 할 수 있도록 당신은 (코멘트에 jsfiddle에 따라) 이미지의 높이를 알고 있기 때문에.

#content { padding: 20px 30px 0 30px; height:450px;}

JSFiddle : http://jsfiddle.net/0qe47o5e/3/

OR 코드 조각은

* { margin: 0; padding: 0; } 
 
#wrapper { width: 900px; margin: 0 auto 0 auto; } 
 
#content { padding: 20px 30px 0 30px; height: 450px; } 
 
.slideshow { position:relative; height:100%; max-width: 100%; margin-bottom: 10px; } 
 
.slideshow img { max-width:100%; } 
 
#footer { padding: 20px 0 0 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
<div id="content"> 
 

 
    <div class="slideshow"> 
 
     <img src="img/1.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;" /> 
 
     <img src="img/2.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;" /> 
 
     <img src="img/3.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;" /> 
 
    </div> <!-- Ends Slideshow --> 
 

 
</div> <!-- Ends Content --> 
 

 
<div id="footer"> Footer HERE 
 
</div> 
 
</div>

출처

2014-12-05 16:48:36

슬라이드 쇼가 바닥 글에 겹치다

답변

관련 문제