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%;
}

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

Answer 1

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

#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以确保问号图像位于视口中。

Answer 2

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

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

Answer 3

使用display:inline-block;代替inline

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

Answer 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>

希望这有帮助，

响应头中元素的绝对定位

4 个答案: