使用相对定位，当窗口在我的笔记本电脑上全屏显示时，它工作得很好，但是，一旦我将它稍微变小，比如 20 像素，元素符号就会变得不对齐。无论如何让这些子弹保持对齐？
HTML。
<div id="mapdiv">
<img id="map" src="images/map117.jpg">
<a class="battlebullets" id="b1" href="RomanBattles117.html#battlerow1">⬤</a>
</div>
CSS。
#map {
position: relative;
width: 100%;
top: 0;
left: 0;
.battlebullets {
font-size: 7px;
color: #F0BC42;
position: absolute;
#b1 {
top: 80%;
right: 45%;
最佳答案
您的 map 包装器应该具有相对定位，而不是图像本身。因此，用于定位的元素符号百分比是相对于视口(viewport)而不是 map 包装的。
当您在 map 包装器上设置相对位置并使用视口(viewport)相对字体大小时，您的元素符号现在将保留在原位，并且还会根据需要在较小的视口(viewport)大小上变小。
我用这些更改更新了您的代码笔。请注意 wrapper 上的相对位置(我将其从图像中删除)和 1vmax 字体大小。
关于html - 当窗口缩小时，如何让元素符号元素与图像保持对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52318833/