响应式标题中元素的绝对定位答案

【问题标题】：Absolute positioning of element in responsive header响应式标题中元素的绝对定位
【发布时间】：2017-01-01 21:59:07
【问题描述】：

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

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

这是我的小提琴：https://jsfiddle.net/8obzf2c8/2/

【问题讨论】：

img { 最大宽度：300px;宽度：100%；高度：自动； }

标签： html css css-position absolute

【解决方案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>

我还设置了margin-top 以确保问号图像在视口中。

【讨论】：

【解决方案2】：

您的包装器具有属性display: inline;，因此它的行为类似于 fe。 span 元素，它不是块。

将display: inline; 更改为display: inline-block;，以便包装器的行为类似于内联容器。您还需要将这个奇怪的 top: -43%; 更改为 fe。 top: 43% 因为事情会变得更加正常和可预测。

【讨论】：

它完全按照我想要的方式工作。谢谢！

【解决方案3】：

使用display:inline-block; 而不是inline

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

【讨论】：

【解决方案4】：

这将使图像位于中心，并且还可以响应所有屏幕尺寸。

#wrapper {
position: relative;
display: inline-block;
}

img{
 width: 100%;
 height: auto;
}

#questionMark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
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>

希望这会有所帮助，

【讨论】：