title: moving down a navigation bar with "top: 0" by using only css
body: <p>There is a navigation-bar with that css-definitions:</p>
  
  <pre><code>.nav {
      position: absolute;
      top: 0;
      height: 40px;
      ...
  }
  
  &lt;div class="nav"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>That means that this navigation is always on to of the page. But now I have to insert a second bar at the top of that naviation-bar. </p>
  
  <pre><code>.top-nav {
      position: absolute;
      top: 0;
      height: 40px;
      ...
  }
  
  &lt;div class="top-nav"&gt;...&lt;/div&gt;
  &lt;div class="nav"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>That "top-nav" will be displayed at several pages (i didn't know now). So I am not able to change the css definitions or the html of the class "nav". </p>
  
  <p>I am looking only for a (css) possibility to move any html-tag with the css-attribut "top: 0" down for a fixed value.</p>
  
  <p>JavaScript is not a solution: There several pages i will include that "top-nav".</p>
  
  <p>Edit:</p>
  
  <p>overlapping:</p>
  
  <p><img src="https://i.stack.imgur.com/qXxas.png" alt="overlapping"></p>
  
  <p>not overlapping:</p>
  
  <p><img src="https://i.stack.imgur.com/azaZC.png" alt="not overlapping"></p>
  
  <p>I am looking for that not overlapping solution.</p>