I am looking to display elements that are relatively positioned next to each other but absolutely positioned above everything else. You can view the desired rendering here and my attempt at achieving it in the fiddle below (or this codepen). Thank you!
.row {
display: flex;
}
.box {
height: 100px;
width: 100px;
background: yellow;
border: 2px solid red;
margin: 5px;
}
.tallBox {
height: 150px;
width: 100px;
background: orange;
border: 2px solid green;
margin: 5px;
}
.bar {
height: 100px;
width: 442px;
background: pink;
border: 2px solid red;
margin: 5px;
}
.group {
display: flex;
// position: absolute;
}
.gap {
height: 100px;
}<h2>Proposal: </h2>
<img src="https://i.sstatic.net/5OZMg.png">
<div class="gap"></div>
<h2>Current rendering without changing any position properties:</h2>
<section class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
<div class="gap"></div>
<h2>Attempt:</h2>
<section class="row special">
<div class="box"></div>
<div class="group">
<div class="tallBox"></div>
<div class="tallBox"></div>
</div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>