javascript - 始终将图像定位在字符上方

Question

我正在尝试定位图像，使其始终位于特定字母上方，无论屏幕大小如何调整。例如，如何将下面 fiddle 中的绿点始终置于无点 i 上方。

我试过使用百分比绝对定位，但如果我调整屏幕大小，图像会移动到无点 i 的左侧/右侧。

HTML

<div id="pictureContainer">
  <img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png">
</div>
<div id="textContainer">
  <h1>H&inodot; World</h1>
</div>

CSS

#textContainer {
    text-align: center;
}

#greenDot {
    height: 10px;
    width: 10px;
}

JS FIDDLE https://jsfiddle.net/473hgg9o/1/

Answer 1

使用相对和绝对定位。 Here is an updated fiddle .根据需要更改顶部和左侧的值。这使它们保持在同一个容器中，因此它们可以一起移动。

<div id="textContainer">
    <h1>
        H<span class="i-container">&inodot;<img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png"></span> 
        World
    </h1>
</div>

.i-container{
    position: relative;
}

.i-container img{
    position: absolute;
    top: 0;
    left: 0;
}