相对于页面顶部放置图像 [英] Making an image position relative to the top of the page
本文介绍了相对于页面顶部放置图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2张需要稍微重叠的图像。我的第一张图片是logo.png，我的第二张图片是form.png
I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png
我的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>
我的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;}
基本上我需要两个图像都相对居中屏幕尺寸，我需要2重叠。使用此代码，两个图像都居中，但我的表单似乎比徽标低了8％，而不是屏幕顶部低了8％。这是我应该与2重叠的方式吗？还是我要离开？
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?
谢谢！
推荐答案
这样的东西怎么样？
或使用位置：绝对，如果您要这样做的话：
实时演示
Or using position: absolute, if that's what you want:
Live Demo
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：
<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>
这篇关于相对于页面顶部放置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
