Html 使图像相对于页面顶部的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5250739/
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
Making an image position relative to the top of the page
提问by Sapp
I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png
我有 2 张图像需要稍微重叠。我的第一张图片是 logo.png，我的第二张图片是 form.png
My html is:
我的 html 是：
<body id="wrapper">
<div id="main" method="post" action="">
<img src="images/logo.png" align="middle" id="Smarty" />
</div>
<div id="box" method="post" action="">
<img id="Form" src="images/form.png" />
</div>
And my CSS is:
我的 CSS 是：
#wrapper #main {
margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center;
display:block;
z-index: 1;}
#wrapper #box{
margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
top: 8%;
display:block;
z-index: -1;}
Basically I need both images to be centered relative to screen size, and I need the 2 to overlap. With this code, both images center, but my form seems to be 8% down from my logo, rather than 8% down from the top of the screen. Is this how I am supposed to be overlapping the 2, or am I way off?
基本上我需要两个图像相对于屏幕尺寸居中，我需要 2 个重叠。使用此代码，两个图像都居中，但我的表单似乎从我的徽标向下 8%，而不是从屏幕顶部向下 8%。这是我应该如何与 2 重叠，还是我离开了？
Thanks!
谢谢！
回答by thirtydot
How about something like this?
这样的事情怎么样？
Or using position: absolute, if that's what you want:
Live Demo
或者使用position: absolute，如果这就是你想要的：
Live Demo
CSS:
CSS：
#main {
margin: 8% auto 0 auto;
text-align:center;
/*
only include this next rule
if you want the first image to be over the second
*/
position: relative
}
#box {
text-align: center;
margin: -12px 0 0 0;
padding: 0
}
HTML:
HTML：
<div id="main" method="post" action="">
<img src="http://dummyimage.com/200x80/f0f/fff" align="middle" id="Smarty" />
</div>
<form id="box" method="post" action="">
<img id="Form" src="http://dummyimage.com/200x40/f90/fff" />
</form>
回答by Hussein
Use the following CSS code to do it. The 2 images will overlap each other and will be centered to the screen both horizontally and vertically.
使用以下 CSS 代码来完成。两个图像将相互重叠，并在水平和垂直方向上以屏幕为中心。
#main, #box{
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* negative half the width of the image */
margin-top:-150px; /* negative half the height of the image */
}
Check working example at http://jsfiddle.net/gVQc3/1/
在http://jsfiddle.net/gVQc3/1/检查工作示例
If you want the images to overlap each other by certain amount of pixels, then see the following link.
如果您希望图像以一定数量的像素相互重叠，请参阅以下链接。
Check working example at http://jsfiddle.net/gVQc3/2/
在http://jsfiddle.net/gVQc3/2/检查工作示例
回答by vittore
You should play around with fixed, static and absolute positions instead of relative.
您应该使用固定、静态和绝对位置而不是相对位置。
See this link http://www.w3schools.com/Css/pr_class_position.asp
回答by LostLin
for the #wrapper #box change the position: relative;to position: absolute;. This should fix the issue
对于 #wrapper #box 更改position: relative;为position: absolute;。这应该可以解决问题
回答by Paul D. Waite
As far as I can see, you're not doing anything that would make the images overlap each other.
据我所知，您没有做任何会使图像相互重叠的事情。
For that to happen, you'd need to apply position: absolute;to them, and position them at the top of the page:
为此，您需要向position: absolute;它们申请，并将它们放置在页面顶部：
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
}
To horizontally center them when positioned absolutely, I think you'll need to know their width. If they were both 100 pixels wide, you'd need:
要在绝对定位时将它们水平居中，我认为您需要知道它们的宽度。如果它们都是 100 像素宽，则您需要：
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
I wouldn't recommend a z-indexof -1either, I don‘t think that makes sense. If you want #mainto be on top, then I'd suggest:
我不会推荐z-index的-1要么，我不认为这是很有意义的。如果你想#main在上面，那么我建议：
#wrapper #main {
z-index: 2;
}
#wrapper #box {
z-index: 1;
}
Note also that in your HTML, you've got methodand actionattributes on <div>s. These won't have any effect: those attributes go on the <form>tag.
另请注意，在您的 HTML 中，您在s上有method和action属性<div>。这些不会有任何影响：这些属性会放在<form>标签上。
