Html 制作相对于页面顶部的图像位置_Html_Css

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

html css

Html 制作相对于页面顶部的图像位置,html,css,Html,Css,我有两张图像需要稍微重叠。我的第一个图像是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=

我有两张图像需要稍微重叠。我的第一个图像是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>

基本上，我需要两个图像相对于屏幕大小居中，我需要两个图像重叠。有了这段代码，两个图像都位于中心，但我的表单似乎比我的徽标低了8%，而不是比屏幕顶部低了8%。这就是我应该重叠2的方式吗，还是我太离谱了

谢谢

你应该选择固定、静态和绝对位置，而不是相对位置

请参见此链接

了解“包装器”框，更改

位置：相对至位置：绝对。这应该可以解决问题
据我所知，您没有做任何会使图像相互重叠的事情
为此，您需要应用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中，
s上有方法
和动作
属性。这些不会有任何影响：这些属性会出现在
标签上。
这样的东西怎么样

或者使用position:absolute
，如果这是您想要的：


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
}

<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:
#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
}

<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>

使用以下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 */
}

检查工作示例
如果希望图像彼此重叠一定数量的像素，请参见以下链接
查看工作示例，您是否可以提供一个屏幕截图，说明您希望它如何显示。
-这是一个看起来很有趣的div
。我假设你的意思是表单
：）这可能是他想要的，但请注意，他说“我有两个图像需要稍微重叠”。我的示例包括两个图像。太棒了-现在有没有一种方法可以用同一种方法将文本和输入框放置在表单顶部？@Sapp：您想要哪个演示？