CSS 如何固定图像相对于具有不同屏幕尺寸的另一个图像的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7474889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix an image position relative to another image with different screen sizes
提问by David Zhao
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.
我正在编写一个网站/iPad 应用程序（使用PhoneGap），其中我在幻灯片上有 1024x768 图像。我想在 1024x768 图像的顶部放置另一个图像，例如主页图标，在完全相同的位置，无论屏幕大小（例如高/低分辨率 PC 屏幕，或 1024x768 平板显示器）。我尝试了绝对，但是在不同的显示中位置会发生变化，并且它与我在 CS 5 中最初设置的位置不同。
采纳答案by James Montagne
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
与其他答案类似，但如果您不想定义宽度和高度，则可以使用float：
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
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: relativeor 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.
只要父容器设置为position: relative或position: absolute，那么绝对定位的图像应该相对于父容器的左上角定位。这应该完全独立于屏幕分辨率。
回答by Le_Bousier
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.
事情是在我的情况下，图像不是同一个父 div 的孩子。我已经设置了我目前正在使用的代码的 Fiddle 示例。
<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.
值得一提的是，我无法更改 HTML 代码设置。
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.
先感谢您。
回答by katy lavallee
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.
将您的 1024x768 图像放在相同大小的 div 中。将您的主页图标也包含在该 div 中。给 div 相对位置，给 home 图标绝对位置，它将绝对定位在它的父 div 内。
回答by greggreg
html:
html：
<div id="bottom">
<div id="top"></div>
</div>
css:
css：
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}
