HTML & CSS - 绝对定位 div 溢出相对 div，意外结果

Question

我在相对div（包含图像）中有一个绝对定位的div（包含一些文本）并且它被设置为底部：0px；但是绝对值 div 在图像下方溢出。我似乎无法解决这个问题，我尝试将 overflow: hidden 应用到相对 div.

问题请见下方 https://jsfiddle.net/rebeccasmith1301/zzpxe767/

HTML

<div id="page-wrapper">
    <div id="footer-header-image">
        <div id="header-image-title">
            <h2>Some text</h2>
        </div>
        <img src="http://trustedfinance.co.uk/wp-content/uploads/2014/06/placeholder.png" id="apprentice-img"/>
    </div>
</div>

CSS

#page-wrapper {
    background-color: red; 
    height: 400px;
}

#footer-header-image {
    position:relative;
}
#header-image-title {
    position: absolute;
    left: 1.5%;
    bottom: 0px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, .85);
    padding: 2% 1.5% 2% 1.5%;
}
#apprentice-img{
    width: 100%;
}

Answer 1

图片上有一些行高。尝试：

#apprentice-img{
    width: 100%;
    display:block;
}

Answer 2

嗯，这是正确的行为。当您设置绝对定位 div 时，它会超出 "normal" 流程。也许您可以使用 "position:relative" 并更改您放置 div 的方式，或者使用 javascript.

HTML & CSS - 绝对定位 div 溢出相对 div，意外结果

HTML & CSS - Absolute positioned div overflows relative div, unexpected result

html

css

css-position

overflow