title: Need to use position:fixed but still need element in flow. How to do it?
body: <p><strong>Scenario:</strong></p>
  
  <p>In HTML, I have 2 element (top bar and images). The top bar need to be
  at <code>position:fixed</code> (which will break the flow, I understand that). And
  the 2nd element has <code>margin-top</code> to push down the image after the
  "top bar". This has no issue until I minimised my browser width, the
  content in the "top bar" push the container height and overlap the 2nd
  element, which is the image. And this look ugly.</p>
  
  <p>Anyway to have the 2nd element in flow with the 1st element, so that no matter how I minimised my browser width, the 2nd element is
  smart enough to push down.</p>
  
  <p><strong>Code: CSS</strong></p>
  
  <pre><code>.TopBar {                                   /* 1st Element */
      background-color: #000000;
      opacity: 0.5;
      width: 100%;
      position:fixed;
      padding:10px;   
  }
  .TopBar &gt; div {
      color:white;
  }
  
  .carousel {                                 /* 2nd Element */
      display: inline-block;
      margin-top:73px;
  }
  .carousel_img {
      width: 100%;
  }
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/X6Z8x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X6Z8x.png" alt="enter image description here"></a></p>