Absolute Position Recipes

Examples for using absolute positioned elements.

Side by Side Columns

Scenario: you’re required to have absolute positioned element layers that are side-by-side. These elements and their contents have a variable width and height that can flex depending on the contents.

<div class="container">
    <div class="layer">
        <!-- contents -->
    </div>
    <div class="layer">
        <!-- contents -->
    </div>
</div>

When the absolute positioned layers have all of their sides (top, right, bottom, left) set to 0, it fills the parent container.

Then by using flex-direction column for our relative positioned parent container and left and right auto margins on the absolute position layers, they align side-by-side.

.container {
    position: relative;
}
.layer {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
}
.layer:first-child {
    margin-right: auto;
}
.layer:last-child {
    margin-left: auto;
}

Sandbox Demo

• CSS