如何固定图像相对于不同屏幕尺寸的另一图像的位置

Question

我正在编写一个网站/iPad应用程序（使用 phonegap ），在幻灯片节目中，我有1024x768图像。我想在1024x768图像的顶部放置另一个图像，例如，在屏幕尺寸（例如高/低分辨率PC屏幕）或1024x768平板电脑显示屏上，位置完全相同的位置。我尝试了绝对的，但是位置在不同显示中的变化，并且与我最初在CS 5中设置的位置不同。

Answer 1

与其他答案类似，但如果您不想定义宽度和高度，可以使用 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;   
}

只要将父容器设置为 position:relative 或 position:absolute，那么绝对定位的图像应该相对于左上角定位父母的。这应该完全独立于屏幕分辨率。

Answer 2

将 1024x768 图像放入相同大小的 div 中。也将您的主页图标包含在该 div 中。给 div 相对位置，给主页图标绝对位置，它将绝对定​​位在其父 div 内。

Answer 3

我尝试了这里提出的解决方案，但它不起作用。我基本上有同样的问题：滑块中的两个图像，其中一个是绝对位于百分比值的位置（因此，当我更改视口的宽度时，它侧面滚动）。另一个图像应与第一个相对于后者静态定位的第一个图像。

事实是，我的图像不是同一父母div的孩子。我已经设置了当前正在使用的代码的小提琴示例。

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>

我已经为这个问题苦苦挣扎了一段时间，但是我无法弄清楚。我希望我已经足够清楚了。

先感谢您。

Answer 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: *??*;}