制作相对于页面顶部的图像位置答案

【问题标题】：Making an image position relative to the top of the page制作相对于页面顶部的图像位置
【发布时间】：2011-07-12 03:59:37
【问题描述】：

我有 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;}

基本上我需要两个图像相对于屏幕尺寸居中，并且我需要两个重叠。使用此代码，两个图像都居中，但我的表单似乎从我的徽标向下 8%，而不是从屏幕顶部向下 8%。这是我应该如何与 2 重叠，还是我离题了？

谢谢！

【问题讨论】：

您能否提供一张您希望它如何显示的屏幕截图..
<div id="box" method="post" action=""> - 看起来很有趣div。我假设你的意思是form :)

标签： html css

【解决方案1】：

您应该使用固定、静态和绝对位置而不是相对位置。

查看此链接http://www.w3schools.com/Css/pr_class_position.asp

【讨论】：

【解决方案2】：

使用以下 CSS 代码来完成。 2 个图像将相互重叠，并将在水平和垂直方向上居中于屏幕。

#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 */
}

在http://jsfiddle.net/gVQc3/1/查看工作示例

如果您希望图像彼此重叠一定数量的像素，请参阅以下链接。

在http://jsfiddle.net/gVQc3/2/查看工作示例

【讨论】：

这可能是他想要的，但请注意他说“我有 2 张图像需要稍微重叠”。
我的示例包括 2 张图片。

【解决方案3】：

这样的事情怎么样？

Live Demo

或者使用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>

【讨论】：

太棒了 - 现在有没有一种方法可以用相同的方法在表单顶部放置文本和输入框？
@Sapp：你想要哪个演示？

【解决方案4】：

据我所知，您没有做任何会使图像相互重叠的事情。

为此，您需要对它们应用position: absolute;，并将它们放在页面顶部：

#wrapper #main,
#wrapper #box {
    position: absolute;
    top: 0;
}

要在绝对定位时将它们水平居中，我认为您需要知道它们的宽度。如果它们都是 100 像素宽，您需要：

#wrapper #main,
#wrapper #box {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
}

我也不推荐-1 中的z-index，我认为这没有意义。如果您希望#main 位居榜首，那么我建议：

#wrapper #main {
    z-index: 2;
}

#wrapper #box {
    z-index: 1;
}

另请注意，在您的 HTML 中，<div>s 上有 method 和 action 属性。这些不会有任何影响：这些属性在 <form> 标签上。

【讨论】：

【解决方案5】：

对于#wrapper #box，将position: relative; 更改为position: absolute;。这应该可以解决问题

【讨论】：