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

Question

我一直在寻找一种方法，可以将 2 个 div 始终放在同一个地方，无论访问者的分辨率有多大不同。所以，我使用了一个大小固定的背景图像（所以它总是在每个分辨率上完全显示），并且无论分辨率是多少，我都希望在特定位置放置 2 个 div。

例如，如果我使用了 mario 背景（例如这个）并且我想在管道上放一只食人鱼，那么它总是在每个分辨率的管道上。

有没有办法做到这一点？

Answer 1

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 - 您可以调整窗格大小并查看位置不变： https: //jsfiddle.net/yu2o0fpt/