我正在尝试定位图像,使其始终位于特定字母上方,无论屏幕大小如何调整。例如,如何将下面 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ı World</h1>
</div>
CSS
#textContainer {
text-align: center;
}
#greenDot {
height: 10px;
width: 10px;
}
JS FIDDLE https://jsfiddle.net/473hgg9o/1/
最佳答案
使用相对和绝对定位。 Here is an updated fiddle .根据需要更改顶部和左侧的值。这使它们保持在同一个容器中,因此它们可以一起移动。
<div id="textContainer">
<h1>
H<span class="i-container">ı<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;
}
关于javascript - 始终将图像定位在字符上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32061055/