我有 2 张图片需要稍微重叠。我的第一张图片是logo.png，第二张图片是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 个重叠。使用此代码，两个图像都居中，但我的表单似乎比我的 Logo 低 8%，而不是比屏幕顶部低 8%。这是我应该如何与 2 重叠，还是我离题太远了？
谢谢!
最佳答案
这样的事情怎么样？
或者使用position: absolute，如果这是你想要的:
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>
关于html - 使图像位置相对于页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5250739/