将div定位在图像正下方，高度未知，位置为绝对/相对

Question

我有一个图像，它的宽度是视口宽度的88%，所以它的高度是动态的。我需要将.pricecontainermobilediv直接定位在图像下方，这样无论视口如何，它都会直接位于图像下方。。。我试着通过position:absolute/relative来设置它，但我无法让它工作，因为我需要我的图像垂直居中(减去46px(。。。我认为这是在扰乱绝对/相对。。。我哪里错了？

注意这仅用于纵向。。。请按此方向查看代码，以查看正确的样式等。

JSFiddle：https://jsfiddle.net/cz9hebg7/1/

代码：

<div id="placement">
<img src="images/" alt="."/>
<div class="pricecontainermobile">
<h1>TEST</h1>
<h2>$ 30.00</h2>
</div>
</div>

.pricecontainermobile>h2 {
text-align: center;
font-size: 12px;
}
.pricecontainermobile>h1 {
display: block;
font-family: neue-haas-grotesk-text, sans-serif;
color: white;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 13px;
top: 0;
}
.pricecontainermobile {
display: block;
width: 100%;
background: blue;
position: absolute;
}
#placement {
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 88%;
margin-left: 6%;
background: red;
}
#placement img {        
width: 100%;
height: auto;
position: relative;
top: calc(50% - 46px);
transform: translateY(-50%); 
}

Answer 1

如果.pricecontainermobile块的高度是固定的，你可以把它和img一起放在一个容器中，然后把容器放在#placement中，而不是img中。

所以我把h1和h2的高度固定为18px；如果你愿意，你可以改变。还要注意，我使用了img的占位符图像。

.pricecontainermobile>h2 {
text-align: center;
font-size: 12px;
line-height: 24px; /* new: fix height */
margin: 0;
}
.pricecontainermobile>h1 {
font-family: 'neue-haas-grotesk-text', sans-serif;
color: white;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 13px;
line-height: 24px; /* new: fix height */
margin: 0;
}
.pricecontainermobile {
display: block;
width: 100%;
background: blue;
position: absolute;
padding: 6px 0; /* new: correct header's margins */
}
#placement {
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 88%;
margin-left: 6%;
background: red;
}
#placement .imgcontainer { /* new: moved from img */
position: relative;
top: calc(50% - 30px); /* corrected for height of header */
transform: translateY(-50%);
}
#placement img {
vertical-align:top;
width: 100%;
height: auto;
}

<div id="placement">
<div class="imgcontainer">
<img src="https://placehold.it/600x200" alt="." />
<div class="pricecontainermobile">
<h1>TEST</h1>
<h2>$ 30.00</h2>
</div>
</div>
</div>