How do I align bottom element above (not overlay) top element using css without changing the current HTML structure

Question

I want to align the bottom element in an HTML file on top of the parent element, I do not want to overlay it, I literally want the bottom element to be on top of the top element:

Example: HTML:

<div class="top-container"></div>
<div class="bottom-container"></div>

CSS:

.top-container {
    width: 200px;
    height: 200px;
    background-color: green;
}

.bottom-container {
    width: 200px;
    height: 200px;
    background-color: red;
}

Current Output:

Expected output: I want the red box to be above the green box.

Answer 1

If you can wrap the two elements in a div, if they are not already wrapped, then in the container element, display: flex; flex-direction:column-reverse; display: flex; flex-direction:column-reverse; ... if there's really no container element, your best bet is position: relative on the bottom element and bottom: 400px . They won't switch spots, but the red one will be ontop of the green one.