title: Header is disappearing when the position is fixed
body: <p>When I set <code>position:fixed</code> to my header, it disappears, and I cannot figure out why. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  #header {
    position: fixed;
  }
  
  #header-title {
    float: left;
  }
  
  #header-navigation {
    float: right;
  }
  
  .content-container {
    width: 100%;
    columns: 3;
    -webkit-columns: 3;
    /* Safari and Chrome */
    -moz-columns: 3;
    /* Firefox */
    column-gap: 0px;
    -moz-column-gap: 0px;
    -webkit-column-gap: 0px;
    column-fill: balance|auto;
  }
  
  .post {
    display: block;
    position: relative;
  }
  
  .post img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .post h2 {
    position: absolute;
    display: none;
    top: 50%;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    color: #000;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
  }
  
  .post:hover img {
    opacity: 0.15;
  }
  
  .post:hover h2 {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="header"&gt;
  
      &lt;div id="header-title"&gt;
        TITLE
      &lt;/div&gt;
  
      &lt;div id="header-navigation"&gt;
        MENU
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="content-container"&gt;
  
      &lt;div class="post"&gt;
        &lt;img src="1.jpeg"&gt;
  
        &lt;h2 class="post"&gt;
          Hello
        &lt;/h2&gt;
  
      &lt;/div&gt;
  
      &lt;div class="post"&gt;
        &lt;img src="1.jpeg"&gt;
  
        &lt;h2 class="post"&gt;
          Hello
        &lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;div class="post"&gt;
        &lt;img src="1.jpeg"&gt;
  
        &lt;h2 class="post"&gt;
          Hello
        &lt;/h2&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>