title: How to fix element at top in CSS?
body: <p>I have problem with position on CSS.</p>
  
  <p>I create 3 elements: a menu <code>navbar</code>, a category bar (to filter content), and content.</p>
  
  <p>It looks like this:</p>
  
  <pre><code>*Menu `navbar`*
  Home             About US
  
  *Category bar*
  Category 1       Category 2
  
  *Content*
  Lorem ipsum dolor sit amet consectetur adipisicing elit
  </code></pre>
  
  <p>When scrolling down, the menu show is hidden, and category bar will be fixed on top.</p>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/qlMkg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qlMkg.png" alt=""></a></p>
  
  <p>When I add CSS code to fix category bar at top:</p>
  
  <pre><code>ul#filters {
      overflow: hidden;
      background-color: #333;
      position: fixed;
      width: 100%;
  }
  
  ul#filters li {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
  }
  </code></pre>
  
  <p>It looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/AqvMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AqvMW.png" alt=""></a></p>
  
  <p>I expected output is: </p>
  
  <p>When loading page success, like the first image in my answer. When the user scrolls down, menu hidden, category bar fix top, content at below category bar.</p>
  
  <p>Like this: </p>
  
  <p><a href="https://i.stack.imgur.com/J4ci0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J4ci0.png" alt=""></a></p>
  
  <p>Note: change menu bar to category bar</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul#filters {
      overflow: hidden;
      background-color: #333;
      position: fixed;
      width: 100%;
  }
  
  ul#filters li {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;nav class="navbar navbar-fixed green child-nav"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="container"&gt;
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse navbar-ex1-collapse  "&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="active"&gt;&lt;a href="#home" class="scroll"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about-us" class="scroll"&gt;About US&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="container"&gt;
      &lt;ul id="filters" class="loaiduan clearfix"&gt;
          &lt;li class="li-selected"&gt;
              &lt;a href=""&gt;Category 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="li-selected"&gt;
              &lt;a href=""&gt;Category 2&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="container" class="list"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>