[解決済み] フォームを固定化する

質問

私は、「ようこそ」と次のフォーム（実際にはフォームの冒頭部分のみ）からなる固定ヘッダーを作成しようとしています。CSSスタイルページがすべての見出しを固定するよう指示しているため、「ようこそ」は固定されたままです。しかし、私のプログラムは、フォームの一部をヘッダーに置くことを許可しません。フォームのこの部分も固定されるようにするには、どうしたらいいのかわかりません。

<h1>Welcome</h1>


 <form action="website.php" method="POST">
      <strong>Name:</strong>
        <input type="text" name="user"/>
         <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
         <select name="Gender[]" double="double">
           <option value="Female">Female</option>
           <option value="Male">Male</option>
         </select></div>

解決方法は？

<div class="fixed">
    <h1>Welcome</h1>
</div>

<div class="form">
    <form action="website.php" method="POST">
       <strong>Name:</strong>
       <input type="text" name="user"/>
       <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
       <select name="Gender[]" double="double">
           <option value="Female">Female</option>
           <option value="Male">Male</option>
       </select>
   </form>
</div>

そして、CSS

.fixed
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    margin:0 auto;
}

.form
{
    margin: 80px auto;
    width: 200px;
    line-height: 40px;
}

input, select
{
    width: 120px;
}

フィドルはこちら