html - CSS - 始终将 div 放在同一个位置

Question

我一直在寻找一种方法，使 2 个 div 始终放置在同一个位置，无论访问者的分辨率有多么不同。因此，我使用了一个大小固定的背景图像(因此它总是在每个分辨率下都完全显示)，并且无论分辨率如何，我都希望将 2 个 div 放置在特定位置。

例如，如果我使用马里奥背景(例如 this one )并且我想放一个 piranha在管道上，因此它始终在每个分辨率的管道上。

有办法吗？

Answer 1

通过使用与视口(viewport)相关的单位 vw 和 vh，您通常可以将内容固定在页面的同一部分，而不管分辨率如何。这是一个示例，说明如何将食人鱼植物放置在完全相同的位置(在背景中的管道顶部)，而不管屏幕分辨率如何。

CSS:

html, body {
    margin: 0;
    overflow: hidden;
}

body {
    background: url(https://i.imgur.com/goKnXzJ.png);
    background-size: 100%;
}

#plant {
    position: absolute;
    left: 83vw;
    top: 30vw;
}

#plant img {
    height: 10vw;
}

HTML:

<div id="plant">
    <img src="http://img2.wikia.nocookie.net/__cb20120501175714/fantendo/images/b/b0/Paper_Piranha_Plant.png" />
</div>

这是一个有效的 JSFiddle - 您可以调整 Pane 大小并查看位置不变:https://jsfiddle.net/yu2o0fpt/