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

【问题标题】：CSS - Place a div always in the same placeCSS - 始终将 div 放置在同一个位置
【发布时间】：2015-09-26 17:39:37
【问题描述】：

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

例如，如果我使用了 mario 背景（例如 this one），并且我想在管道上放置一个 piranha，以便在每个分辨率上它始终在管道上。

有办法吗？

【问题讨论】：

我认为“固定尺寸”和“在每个分辨率上完全显示”是矛盾的。
使用绝对位置

标签： html css fixed

【解决方案1】：

您通常可以通过使用视口相关单元vw 和vh 将内容粘贴在页面的同一部分，而不管分辨率如何。下面是一个示例，说明如何将 pirahna 植物放置在完全相同的位置（在背景中的管道顶部），而不管屏幕分辨率如何。

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/

【讨论】：

您好！这对其中一个 div 非常有效。但是，另一个（可能是因为图像大小）不适合不同的分辨率。
@IcE “不合适”到底是什么意思？只是想了解你想要的最终结果。
嗯，当我输入“bottom”命令时它很合适，但是根据分辨率，它不能正确地安装在管道上。它是左还是右。这是一张照片：i.imgur.com/7hWSxXg.jpg
很遗憾，我无法重现该问题。滚动条会影响vw 的计算（你使用的是vw 而不是vh 对吗？）你能告诉我jsFiddle 中的定位错误吗？这样我也许可以看到发生了什么。
我能够修复它。实际上，它并不是真正的完美，但是，完美是很难达到的。 :) 非常感谢您的帮助。