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?

Incogitant

I think "fixed size" and "fully shown on every resolution" are contradictory. – Tarantula

Use positions absolute – Ecumenical

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/

Imam

Hello! That worked perfectly for one of the divs. However, the other one (probably because of the image size) doesn't fit good on different resolutions. – Incogitant

@IcE What exactly do you mean by "doesn't fit good"? Just trying to get an idea of the end result you're going for. – Imam

Well, it fits fine when I put the "bottom" command, but depending on the resolution, it doesn't fit properly on the pipe. It's either left or right. Here's a pic: i.imgur.com/7hWSxXg.jpg – Incogitant

I'm unfortunately not able to recreate the problem. Scrollbars can affect the vw calculation though (you are using vw and not vh right?) Could you maybe show me the positioning error in a jsFiddle? That way I can maybe see what is up. – Imam

Here's a preview of the problem: gamebanana.com/members/125090 There are 2 things that I had the problem with. The one is the "vine" on the right side (which was supposed to be on that block) and the other is the piranha. And no, I've not used vh, but vw. – Incogitant

@IcE I took a look at that profile URL. The CSS that positions the piranha plant is the following: div#ProfileArea {position: absolute; bottom: 74px; margin-left: 680px;, i.e. positioned in terms of pixels. The CSS that positions the vine is div#SubsArea {position: absolute; bottom: 177px; right: 25px;}. Neither are positioned using vw and neither have heights specified in vw, so I would guess that some of your CSS styles are not being applied properly. Figure out how to position and size them in terms of vw and then you'll be home free! – Imam

Yes, I have removed the vw positioning as it didn't work on the piranha. It did work for the "bottom", but depending on the resolutions it was like in the pic above (so I guess it'd not be possible to position it exactly on the pipe for everyone). i.imgur.com/7hWSxXg.jpg – Incogitant

@IcE Still not able to recreate the issue - it's working fine in my JSFiddles on all resolutions including mobile devices. Here is a JSFiddle that positions the piranha plant and the beanstalk, and appears the same across all of my devices: jsfiddle.net/pved1nnw – Imam

I was able to fix it. Actually, it's not really perfect, but hey, perfection is hard to reach. :) Thank you very much for the help. – Incogitant