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

Question

我正在寻找一种方法，可以始终让两个div放置在同一个位置，无论访问者的分辨率如何不同。因此，我使用了一个具有固定大小的背景图像（因此它始终在每个分辨率上完全显示），我想把两个div放在特定的位置，无论分辨率如何。

例如，如果我使用马里奥背景（例如这个）并希望将食人花放到管道上，以便在每个分辨率下它始终在管道上。

有没有一种方法可以实现？

- TheDoomDestroyer

---

我认为“固定大小”和“在每个分辨率下完全显示”是矛盾的。 - Oriol

使用绝对定位。 - Ali Mehdi

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/

- Maximillian Laumeister

---

当我使用“bottom”命令时，它适合得很好，但是根据分辨率，它在管道上不适合。它要么向左或向右。这里有一张图片：http://i.imgur.com/7hWSxXg.jpg - TheDoomDestroyer

以下是问题的预览：gamebanana.com/members/125090 我遇到的问题有两个。其中一个是右侧的“藤蔓”（应该在那个块上），另一个是食人花。不，我没有使用vh，而是vw。 - TheDoomDestroyer

是的，我已经删除了vw定位，因为它在piranha上不起作用。它对于“底部”确实有效，但是根据分辨率，它就像上面的图片一样（所以我猜无法为每个人精确定位到管道）。http://i.imgur.com/7hWSxXg.jpg - TheDoomDestroyer

@IcE 仍无法重现该问题 - 在我的JSFiddles中，在所有分辨率和移动设备上都能正常工作。以下是一个JSFiddle，它定位了食人花和豆茎，并在我所有设备上呈现相同的效果：https://jsfiddle.net/pved1nnw/ - Maximillian Laumeister

我已经修好了。实际上，它并不是完美的，但是嘿，完美很难达到。:) 非常感谢您的帮助。 - TheDoomDestroyer