将登录表单移近标题CSS HTML

我正在尝试将登录表单从当前位置向上移动。它需要更接近的标志，我知道这是因为最小的高度设置在标题，但这需要被固定

右边是窗体的显示方式。左边是它应该如何显示

请注意，更改只会影响登录表单

.header-strip {
   background: url("../../Images/gradient.gif");
    min-width: 981px;
    position: relative;
    z-index: 300;
    min-height: 134px;
    padding-top: 10px;
}

.login {
    background: url("../../Images/Audi-R8-TDI.jpg");
    background-size: 100%;
    padding: 50px 0 50px 0;
    background-repeat: no-repeat;
    background-position: left;
    height: 500px;
    width: 1000px;
    border-radius: 5px;
}

---

感谢您的帮助。

尝试为登录添加页边空白顶部。

减少页边空白顶部，直到获得所需的页边空白。目前是50岁

.login {
      padding: 20px 0 50px 0;
}

---

希望有帮助。

您必须将页边距顶部和填充顶部设置为0，但还必须将表单标记设置为显示内联编辑：

改变

.login {
    background: url("../../Images/Audi-R8-TDI.jpg");
    background-size: 100%;
    padding: 50px 0 50px 0;
    background-repeat: no-repeat;
    background-position: left;
    height: 500px;
    width: 1000px;
    border-radius: 5px;
}

到

这将更改登录到标题的距离，并将登录设置为更高的z索引

---

请参见这里的JSFIDLE：

首先使用ID而不是类。我猜你永远不会同时使用两个标题条或两个登录表单

轻松将“边距”设置为0px。这将消除您实际拥有的距离

#login {
margin: 0px;

background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
}

尝试在浏览器中使用内置的“inspector”键按“F12”来播放边距

这实际上只会影响“顶部”距离

研究这一点：

编辑： 即使你的div也不应该是父母

<div id="header-strip">..</div>
<div id="login">..</div>

。。
..

尝试添加上页边距top.login类

.login {
  clear:both;
  margin-top:50px;
  background: url("../../Images/Audi-R8-TDI.jpg");
  background-size: 100%;
  padding: 50px 0 50px 0;
  background-repeat: no-repeat;
  background-position: left;
  height: 500px;
  width: 1000px;
  border-radius: 5px;

---

---

}

发布您的代码并添加一个。这不是一个好的解决方案，但请尝试添加一个负的上边距<代码>页边空白顶部：-20px它只会吞噬登录表单中的背景图像，并将内容向上移动。我已经尝试过了，它没有任何地方接近徽标。这在表单上吗？或者页眉？尝试在表单中执行此操作，但您必须注意，页眉和表单上都需要将padding和margin设置为0。margin:0px和padding:0px将其移近了一点。“显示内联”会使表单消失得很奇怪。非常奇怪…尝试在表单标记中设置一个宽度，以查看heI已设法将表单向上移动到页眉的位置，因此现在它位于页眉下方。但是它不会更高，更接近徽标谢谢，但它不会将窗体向上移动。它会将表单中的内容向上移动。这会使其更靠近页眉，但不会与页眉重叠以更靠近徽标。然后，您可以将

边距：-20px 0 0

更改为可能

边距：-50px 0 0

，正如我前面提到的，它只是不向上移动，它会将表单内容向上移动并吃掉背景图像。我不知道为什么？再加上这3行代码：

position:relative；排名：0；z指数：9999它们可以工作，我在这里测试了它们是的，我已经解决了。我刚刚调整了填充顶部：10px；到顶部填充：35px。这将使徽标更靠近登录表单。我想这就行了。谢谢你的帮助。我试过用firebug玩它，但是任何负值都不会影响位置，只会影响内容。正边距值将窗体向下移动。如果要重叠，必须将父div设置为“位置：相对”，将登录设置为边距顶部约130px，将标题条设置为位置：绝对。使用绝对位置时，必须使用固定大小（宽度和高度）和istead的边距“上、左、右和下”。否则玩“浮动”，但每次都有点棘手！不，它不与标题重叠。哦，我想你需要左边的代码，因为你写了“右边是窗体的显示方式，左边是窗体应该显示的方式。”
<div id="header-strip">..</div>
<div id="login">..</div>

.login {
  clear:both;
  margin-top:50px;
  background: url("../../Images/Audi-R8-TDI.jpg");
  background-size: 100%;
  padding: 50px 0 50px 0;
  background-repeat: no-repeat;
  background-position: left;
  height: 500px;
  width: 1000px;
  border-radius: 5px;