How to fix an image position relative to another image with different screen sizes

问题

I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.

回答1:

Similar to the other answers, but if you prefer not to define the width and height, you can use float:

http://jsfiddle.net/RprTY/

<div>
    <img src="http://placekitten.com/300/300">    
    <img src="http://placekitten.com/30/30" id="smallone">
</div>

CSS:

div{
    float: left;
    position: relative;
}

img{
     vertical-align: bottom;   
}

#smallone{
    top: 0;
    left:0;
    position:absolute;   
}

As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.

回答2:

Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.

回答3:

I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.

The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.

http://jsfiddle.net/36QPG/1/

<div class="image">
    <img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
    <div class="image">
        <img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
    </div>
</div>

It's worth mentioning that I can't change the HTML code set up.

I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.

Thank you in advance.

回答4:

html:

<div id="bottom">
    <div id="top"></div>
</div>

css:

#bottom{ 
    background: url(*bottom-image-url*); 
    position: relative; 
    width: *??*; 
    height: *??*;}
#top{ 
    background: url(*top-image-url*); 
    position: absolute; 
    width: *??*; 
    height: *??*; 
    left: *??*; 
    right: *??*;}

来源：https://stackoverflow.com/questions/7474889/how-to-fix-an-image-position-relative-to-another-image-with-different-screen-siz

标签

css

positioning