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

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

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

有任何想法吗？

Thanks!

这是一些代码：

表格：

.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');
}

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

非常奇怪的错误，我无法解释发生了什么。但这与你的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%);
}

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