css - 奇妙な CSS の問題 - フォームに何かを書き留めると、ヘッダーが上に移動します

Question

奇妙な CSS の問題 - フォームに何かを書き留めると、ヘッダーが上に移動します。

「サインイン」をクリックすると、このWeb サイトのヘッダーが上に移動し、ユーザー名またはパスワードのいずれかを入力し始めます。

「サインイン」フォームを固定しておく必要があります。そうしないと、メインコンテンツの下に隠れてしまいます。

そして、ヘッダーの「卵」の背景画像を非表示にしたいので、メインコンテンツを「overflow: hidden」で保持する必要があります。

ここにいくつかのスクリプトがあります：

フォーム：

.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-wrap {
    position:relative;
    z-index:101;
    background-color:#3d4e5b;
    color:#fff;
    overflow:hidden;
}

.site-header {
    padding:2em 0;
    border:1px solid rgba(255,255,255,0.1);
    border-right-width:0;
    border-left-width:0;
}



.site-header:after {
    bottom:-1px;
}

.site-logo a {
    color:#fff;
    font-size:1.5em;
    padding-left:5em;
    z-index:9;
}

.site-logo h1 {
    margin:0.3em 0 0 0;
}

/*------------------------- Dropdown Menu ------------------------*/

.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('http://frenchegg.com/images/backmenu.png');
}