Question

我有一个元素：#home-img-text-container2，在640px以下的视口中，我将其定位absolute并给它一个bottom: 0;位置。我的问题是#home-img-text-container2超过了主要容器/图片#home-main-img。

我已经设置了这样的容器：

<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

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

我不明白为什么它不会位于图像的最底部，而不是位于图像的底部。

有谁看到我做错了什么？同样，这是在媒体查询640px

Answer 1

这是CSS

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

}

绝对定位底部问题

1 个答案: