title: Position a fixed element below another fixed element
body: <p>I have two fixed elements, one of which can either have
  <code>display: block</code> or <code>display: none</code>. The other fixed element is always going to be visible. I want the elements to stick to the top of the website, while having them not overlay each other.</p>
  
  <p><strong>The only proposed solution I found is in these questions:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/30035230/how-to-position-a-fixed-div-under-another-fixed-div">How to position a fixed div under another fixed div?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/22899776/fixed-element-below-fixed-element-without-js">Fixed element below fixed element without JS</a></p>
  
  <blockquote>
    <p>Put your two divs inside another container div and set that one as
    fixed.</p>
  </blockquote>
  
  <p>I can't do that however, as both of these elements are on different positions in the code, which I am not able to change.</p>
  
  <p>Here's a code snippet demonstrating my problem:</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>nav,
  .secondmenu {
    position: fixed;
    height: 120px;
    opacity: 1;
    top: 0;
    width: 100%;
    background: lightgrey;
  }
  
  .secondmenu {
    height: 50px;
    background: grey;
    opacity: 1;
    z-index: 2;
  }
  
  body {
    height: 1000px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="secondmenu"&gt;Might be there or not and overlays the other navigation&lt;/div&gt;
  &lt;div&gt;Some other stuff separating the two from each other with relative position&lt;/div&gt;
  &lt;nav&gt;&lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>What I want and things to keep in mind:</strong></p>
  
  <ul>
  <li>If both elements are visible, they should be fixed on top of the page, while one is below the other</li>
  <li>If only the second element is visible, I want the second one to be fixed at the top of the page</li>
  <li>The first element can change its visibility using inline styles (<code>display:none</code> &lt;-> <code>display:block</code>, even without reloading the website)</li>
  <li>Javascript/Jquery solutions are fine</li>
  </ul>