我有两张图像需要略微重叠。我的第一张图片是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重叠。使用此代码，两个图像都居中，但我的表单似乎比我的徽标低8％，而不是从屏幕顶部向下8％。这是我应该如何重叠2，还是我离开？
谢谢！
答案 0 :(得分：3)
这样的事情怎么样？
或者使用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>
答案 1 :(得分：1)
你应该使用固定，静态和绝对位置来代替相对位置。
答案 2 :(得分：1)
对于#wrapper #box，将position: relative;更改为position: absolute;。这应该解决问题
答案 3 :(得分：1)
据我所见，你没有做任何会让图像相互重叠的事情。
为此，您需要将position: absolute;应用于他们，并将其放置在页面顶部：
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
}
要在绝对定位时将它们水平居中，我想你需要知道它们的宽度。如果它们都是100像素宽，则需要：
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
我也不会推荐z-index -1，我认为这没有道理。如果您希望#main位于首位，那么我建议：
#wrapper #main {
z-index: 2;
}
#wrapper #box {
z-index: 1;
}
另请注意，在您的HTML中，method上有action和<div>个属性。这些属性没有任何影响：这些属性会显示在<form>标记上。
答案 4 :(得分：1)
使用以下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 */
}
如果您希望图像彼此重叠一定数量的像素，请参阅以下链接。