Html 滚动时的静态标题

我编写了一个主页，现在我正在尝试构建一个标题，当内容被滚动时，它是静态的，就像不滚动一样。当内容在其下方/下方时，它应保持在顶部。我找到了这个解决方案，但是，它对我不起作用，因为我不知道把代码放在哪里，因为我尝试的一切都不起作用

单击以获取jsfiddle

我的HTML是：

<!-- #PAGE -->
<div id="page1"> 

  <!-- #HEADER -->
  <div id="header1">
    <div class="content-wrapper">
      <div class="ft-div-left"> 
      <center>
      <img src="FW_Logo_Website.png">
      </center>
      </div>
      <div class="ft-div-right">
        <center>
            </br>
          <a href="logout.php" style="text-decoration:none;">
          <button class="button-logout" name="Ausloggen">Logout</button>
          </a>
        </center>
      </div>
      <div class="ft-div-middle"> </div>
    </div>
  </div>
  <!-- HEADER ENDE --> 

  <!-- #CONTENT -->
  <div id="content">
    <div class="wrapper">
      <div class="left_box">
        <center>
          <img alt="" src="images/camera.png" width="100" height="100" />
          <h1 class="headline" style="font-family:'Montserrat',sans-serif;">RAW DATA</h1>
          <p class="explanation">Alle unretuschierten Fotos.</p>
          <table>
            <tbody>
              <tr>
                <td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
                <td> 24.5 MB</td>
              </tr>
              <tr>
                <td><img alt="" src="images/image.png" width="20" height="20" /></td>
                <td> 758</td>
              </tr>
              <tr>
                <td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
                <td> 3459 x 3294</td>
              </tr>
            </tbody>
          </table>
          </br>
          <button class="button" name="DownloadRaw" onClick="getRawData()">Download</button>
        </center>
      </div>
      <div class="right_box">
        <center>
          <img alt="" src="images/brush.png" width="100" height="100" />
          <h1 class="headline" style="font-family:'Montserrat',sans-serif;">RETUSCHIERT</h1>
          <p class="explanation">Alle retuschierten Fotos.</p>
          <table>
            <tbody>
              <tr>
                <td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
                <td> 24.5 MB</td>
              </tr>
              <tr>
                <td><img alt="" src="images/image.png" width="20" height="20" /></td>
                <td> 758</td>
              </tr>
              <tr>
                <td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
                <td> 3459 x 3294</td>
              </tr>
            </tbody>
          </table>
          </br>
          <button class="button" name="DownloadRet" onClick="getRetouchedData()">Download</button>
        </center>
      </div>
      <div class="clearer"></div>
    </div>
  </div>

  <!-- #FOOTER -->
  <div id="footer1" style="position: fixed; bottom: 0;">
    <div class="content-wrapper">
      <div class="ft-div-left"> </div>
      <div class="ft-div-right">
        <p></p>
      </div>
      <div class="ft-div-middle">
        <center>
          <p>
            <center>
              <a href="" style="text-decoration:none; color:white;"><span class="icon-facebook4" id="facebook" style="color: white;"></span></a> 
              <a href=""  style="text-decoration:none; color:white;"><span class="icon-network" id="website" style="color: white;"></span></a> 
              <a href="" style="text-decoration:none; color:white;"><span class="icon-stumbleupon3" id="issuu" style="color: white;"></span></a> 
              <a href="" style="text-decoration:none; color:white;"><span class ="icon-twitter3"></span></a>
              </br>
              <br>
              <br>
              <span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">&copy; 2014. Frederik Wilhelm. All Rights Reserved.</span>
            </center>
          </p>
        </center>
      </div>
    </div>
  </div>
  <!-- FOOTER ENDE --> 

</div>

---

只需将其设置为固定位置的元素

#header1{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

加

进入css的header1部分

你也可以在电话里这样做

<div id="header1" style="position:fixed">

你能把你的代码贴在一个邮箱里吗？也许可以解释一下什么应该留在哪里？我插入了你的代码，现在页脚是静态的。我当然知道。是的，我的页脚也是静态的。所以页脚和页眉都应该是静态的，只有#内容应该在这里滚动：像这样谢谢！工作完美。我不知道为什么它逃掉了：D谢谢你，伙计！谢谢@rzkio。我会用z索引试试的！谢谢

position:fixed;

<div id="header1" style="position:fixed">