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

Question

我正在编写一个网站/iPad 应用程序(使用 PhoneGap )，我在幻灯片放映中有 1024x768 图像。我想放置另一张图片，例如主页图标，在 1024x768 图像的顶部，在完全相同的位置，无论屏幕尺寸如何(例如，高/低分辨率 PC 屏幕，或 1024x768 平板电脑显示器)。我试过absolute，但是位置在不同的显示器上会发生变化，而且和我最初在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，那么绝对定位的图像应该相对于左上角定位 parent 。这应该完全独立于屏幕分辨率。