CSS - Place a div always in the same place

Question

I was looking for a way to have a 2 divs placed always in the same place, no matter how different the resolution of a visitor is. So, I use a background image whose size is fixed (so it is always fully shown on every resolution) and I'd like to have 2 divs placed at a specific place no matter what the resolution is.

e.g If I used a mario background (e.g this one) and I wanted to put a piranha on the pipe so it is always on the pipe on every resolution.

Is there a way to do it?

Answer 1

You can generally get things to stick on the same part of the page regardless of resolution by using the viewport-releative units vw and vh. Here is an example of how you can position the pirahna plant in the exact same place (on top of the pipe in the background) regardless of screen resolution.

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>

And here is a working JSFiddle - you can resize the panes and see the position unchanged: https://jsfiddle.net/yu2o0fpt/