Need to use position:fixed but still need element in flow. How to do it?

Question

Scenario:

In HTML, I have 2 element (top bar and images). The top bar need to be at position:fixed (which will break the flow, I understand that). And the 2nd element has margin-top 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.

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.

Code: CSS

.TopBar {                                   /* 1st Element */
    background-color: #000000;
    opacity: 0.5;
    width: 100%;
    position:fixed;
    padding:10px;   
}
.TopBar > div {
    color:white;
}

.carousel {                                 /* 2nd Element */
    display: inline-block;
    margin-top:73px;
}
.carousel_img {
    width: 100%;
}

Problem:

Answer 1

As you already know, you can't force position:fixed to flow, so there isn't an answer to your question to do it the way you want.

But the way you describe the problem, it's about supporting different browser sizes. If that's the case, then it sounds to me as if media queries are the answer to your problem.

CSS supports @media { ... } blocks, which allow you to specify styles that only come into play at certain browser sizes. So in order to solve your problem, you need to find out what browser width causes the layout to change (resize very slowly; it will flip out at a specific size), and write a media query that changes your stylesheet for sizes lower than that.

Without (a lot) more detail of your layout, I can't really give you specific code, but there are a lot of resources available online to learn about media queries if you don't already use them.

It's also worth noting that position:fixed can often be troublesome at small browser sizes, so much so that a lot of mobile browsers deliberately didn't even support it for some time. That's changed now, but it can still cause layout gremlins, so you may want to use the media query to switch it off entirely in low-width browsers.