响应中元素的绝对定位 header

Question

我试图获得与此处完全相同的效果：Responsive images positioned over image，所以我希望我的绝对定位元素保持在同一个位置，但在浏览器调整大小时变得更小或更大。在使用此代码之前，我尝试了许多不同的可能性，但我不明白为什么我的包装容器 (id="wrapper") 位于图像下方。为了在图像上得到问号，我需要使用负百分比。在我从 Whosebug 中的另一个问题复制的示例中，有 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

你的包装器有属性 display: inline; 所以它表现得像一个 fe。 span 元素，它不是块。

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

Answer 2

使用display:inline-block;代替inline

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

Answer 3

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.

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>

希望这对您有所帮助，

响应中元素的绝对定位 header

Absolute positioning of element in responsive header

html

css

css-position

absolute