绝对定位的 div 扩展了相对定位的父 div答案

【问题标题】：Absolute positioned div expands the relative positioned parent div绝对定位的 div 扩展了相对定位的父 div
【发布时间】：2019-03-30 00:51:31
【问题描述】：

我搜索了各种问题，这些问题似乎都能够将绝对子代扩展到其相对父代之外。我试图避免这种情况。

我有一个带有 position: relative; 的 div包含一个位置为：绝对的 div；我想总是坐在 div 的底部。当我设置底部：0px;绝对子级以 4 px 超出父级 div。可以通过设置bottom:4px来解决；但是当我开始让网站做出响应时，这样的绝对数字就不起作用了。

html:

<a href="her.html">
    <div class="next_movie">
        <img src="img/her_header.jpg" alt="Picture from the movie 'Her'">
        <div class="movie_info">
           <h2>Her (2013) March 6th in AUD1</h2>
         </div>
    </div>
</a>

css:

.movies {
    width: 616.6px;
    height:663px;
    background-color: #e3e3e3;
    margin-top: 75px;
    position: absolute;
    left:233.3px;;
}
.movie_info, .poster_info {
    color:white;
}
.next_movie {
    position:relative;
    margin:16.6px;

}
.movie_info{
    position:absolute;
    left:0px;
    bottom:0px;
    width:582.5px;
    height:56.6px;
    background:rgba(0,0,0,0.5);
    color:white;
    font-size:25px;
    line-height: 2.3;
}
.movie_info h2 {
    margin-left:15.8px;
}

该站点的测试版本位于此处： http://jhalland.dk/test/

【问题讨论】：

标签： css

【解决方案1】：

您应该尝试从您的 movie_info 样式中移除高度。或者您可以将其更改为最小高度。由于您将 line-height 定义为 2.3，因此您的规则存在冲突

【讨论】：