ฉันมี div ในตำแหน่งที่แน่นอน (มีข้อความบางส่วน) ภายใน div แบบสัมพันธ์ (มีรูปภาพ) และตั้งค่าไว้ที่ด้านล่าง: 0px; อย่างไรก็ตาม div สัมบูรณ์ล้นอยู่ใต้รูปภาพ ดูเหมือนว่าฉันไม่สามารถแก้ไขปัญหานี้ได้ ฉันได้ลองใช้ overflow: ซ่อนอยู่ใน 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>
ซีเอสเอส
#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%;
}