절대 위치 하단 문제

Question

요소가 있습니다. #home-img-text-container2 640p 미만의 뷰포트에서 위치는 absolute이고, 위치는 bottom: 0;입니다. 내 문제는 #home-img-text-container2이 주 용기/이미지 #home-main-img을지나갑니다.

#home-img-text-container1, #home-img-text-container2 { 
    position: absolute; 
} 
#home-img-text-container2 { 
    bottom: 0%; 
    width: 100%; 
} 
#home-img-text-description, #home-img-text-description2 { 
    position: relative; 
    display: inline-block; 
    margin: 0px 0px; 
    padding: 20px 20px; 
    font-size: 1.5em; 
} 

나는 그것이 바로 이미지의 맨 아래에 위치하지 않을 이유를 이해하기보다는하지 않는

<div id="home-main-img"> 
     <img src="images/demolition-home.jpg" alt="Demolition and Wrecking" id="demolition1"> 
     <div class="home-img-text"> 
      <div id="home-img-text-container1"> 
       <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION <br> DONE RIGHT.</div> 
      </div> 
      <div id="home-img-text-container2"> 

수정 CSS :

나는이 같은 컨테이너를 설정 한 그것 밑에.

내가 뭘 잘못하고 있는지 누가 알 수 있습니까? 다시 말하지만, 이것은 미디어 쿼리 여기에 640

Answer 1

에서 것은

#home-main-img { 
    position: relative; 
    background: #000; 
    width: 100%; 
    height: auto; 
    margin: 0; 
} 
#demolition1 { 
    width: 100%; 
    height: auto; 
    margin: 0; 
    display: block; 
} 
#demolition-mobile { 
    width: 100%; 
    height: auto; 
    margin: 0; 
    display: none; 
} 
.home-img-text { 
    position: absolute; 
    left: 13%; 
    top: 25%; 
} 
#home-img-text-container1, #home-img-text-container2 { 
    position: relative; 

    opacity: 0; 
    transition:1s; -webkit-transition:1s; 
    overflow: hidden; 
} 
#home-img-text-container1.fadeDisplay { 
    opacity: 1; 
    transform: translateX(30px); -webkit-transform: translateX(30px); 
} 
#home-img-text-container2.fadeDisplay { 
    opacity: 1; 
    transform: translateX(30px); -webkit-transform: translateX(30px); 
} 
#home-img-text-description, #home-img-text-description2 { 
    position: relative; 
    display: inline-block; 
    margin: 30px 0px; 
    padding: 30px 20px; 
    color: #FFF; 
    background: rgba(0,0,0,.8); 
    font-size: 2.5em; 
    line-height: 1.4em; 
} 
#home-img-text-description:before, #home-img-text-description2:before { 
    position: absolute; 
    content: ''; 
    height: 30px; 
    width: 100%; 
    left: 0px; 
    background: inherit; 
} 
/*#home-img-text-description2:before { 
    width: 80%; 
}*/ 
#home-img-text-description:before, #home-img-text-description2:before { 
    top: -30px; 
    transform: skewX(45deg); 
    transform-origin: right bottom; 
} 
#home-img-text-description { 
    font-family: 'open_sanslight'; 
} 
#home-img-text-description2 { 
    color: #efcd36; 
    font-size: 1.8em; 
} 


/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------------------------*/ 

@media screen and (max-width:640px) { 
#home-img-text-container1 
{ 
    top:15%; 
} 
#home-main-img { 
    height: 65%; 
    width: auto; 
} 
#demolition1 { 
    display: none; 
} 
#demolition-mobile { 
    display: block; 
} 
#home-main-img img{ 
    width: auto; 
    height: 100%; 
    overflow: hidden; 
    max-width: 100%; 
} 
.home-img-text { 
    left: 0%; 
    top: 0%; 
    width: 100%; 
    height: 100%; 
} 


/* 
#home-img-text-container1, #home-img-text-container2 { 
    margin-bottom: 10px; 
} 
#home-img-text-description, #home-img-text-description2 { 
    margin: 10px 0px; 
    padding: 30px 20px; 
    font-size: 1.3em; 
    line-height: 1.4em; 
}*/ 



#home-img-text-container1, #home-img-text-container2 { 
    position: absolute; 
} 
#home-img-text-container2 { 
    bottom: 0%; 
    width: 100%; 
} 
#home-img-text-container1.fadeDisplay { 
    transform: translateX(0px); -webkit-transform: translateX(0px); 
} 
#home-img-text-container2.fadeDisplay { 
    transform: translateX(0px); -webkit-transform: translateX(0px); 
} 

#home-img-text-description, #home-img-text-description2 { 
    position: relative; 
    display: inline-block; 
    margin: 0px 0px; 
    padding: 20px 20px; 
    font-size: 1.5em; 
} 
#home-img-text-description:before, #home-img-text-description2:before { 
    position: absolute; 
    content: ''; 
    height: 0px; 
    width: 100%; 
    left: 0px; 
    background: inherit; 
} 
#home-img-text-description2:before { 
    width: 100%; 
} 
#home-img-text-description:before, #home-img-text-description2:before { 
    top: 0px; 
    transform: skewX(0deg); 
    transform-origin: right bottom; 
} 
#home-img-text-description2 { 
    font-size: 1.2em; 
    width: 100%; 
} 
#description2-block { 
    display: inline; 
} 

}