html - 元素在响应式 header 中的绝对定位

Question

我正在尝试获得与此处完全相同的效果:Responsive images positioned over image ，所以我希望我的绝对定位元素保持在同一个位置，但在调整浏览器大小时会变小或变大。在使用此代码之前，我尝试了许多不同的可能性，但我不明白为什么我的包装容器 (id="wrapper") 被放置在图像下方。为了在图像上得到问号，我需要使用负百分比。在我从 stackoverflow 中的另一个问题复制的示例中，有 Bootstrap 样式。我不知道，但我不想使用 Bootstrap 。对于我做错的所有建议，我将不胜感激。

#wrapper {
    position: relative;
    display: inline;
}
#questionMark {
    position:absolute;
    left:33%;
    top:-43%;
    max-width: 10%;
}

这是我的 fiddle :https://jsfiddle.net/8obzf2c8/2/

Answer 1

inline 元素无法获取其中元素的高度。
您应该从 #wrapper 元素中删除 display: inline。

#wrapper {
  position: relative;
  margin-top: 150px;
}
#questionMark {
  position:absolute;
  left:33%;
  top:-43%;
  max-width: 10%;
}

<div id=wrapper>
  <img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
  <img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>

I also set margin-top to make sure the question mark image is in the viewport.