CSS

Question

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

例如，如果我在管道上使用马里奥背景（例如 this one) and I wanted to put a piranha，那么它总是在每个分辨率的管道上。

有办法吗？

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/

CSS - 始终将 div 放在同一个地方

CSS - Place a div always in the same place

html

fixed