CSS 问题，填写表单时标题上升

Question

我有一个奇怪的 CSS 问题，我不太确定如何解决这个问题。

当我在我的网站上按下“登录”按钮并开始输入用户名时，标题会上升。我真的不知道是什么原因造成的。

有什么想法吗？

谢谢!

这是一些代码:

形式:

.tooltip-wrap {
  position: fixed;
  display:none;
}

.tooltip-wrap .corner {
    position:relative;
    z-index:100;
    margin-left:-5px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-bottom-color:#fff;
}

.tooltip-text { 
    float:left;
    margin-left:-50%;
    padding:1em 15px;
    background:#fff;
    color:#333;
}

这是上升的部分:

.header-navigation.back {
    z-index:-1;
    position:absolute;
    margin-left:0;
    margin-top:-6px;
    border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}

您需要单击“用户名”并开始输入内容。

Answer 1

非常奇怪的错误，我无法解释发生了什么。但它与你的div.header-navigation.back有关。如果您删除它，该行为就会消失。

据我所知，您只是将该元素用于背景图像，因此无论如何将其包含在标记中并不是一个好主意。如果你修改你的 .site-header 你可以在没有额外的 div 的情况下达到同样的效果:

.site-header {
   background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
   background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
               linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}

我不太明白你想用你的渐变实现什么，但我的想法是为那些支持它们的浏览器提供多个背景，并回退到纯色。