This CSS trick allows you to create responsive overlapping elements without the use of position: absolute. Works great for tab panels of differing heights.

.tab__panel {
position: relative;
top: 0;
left: 100%;
width: 100%;
margin-left: -100%;
float: left;
padding: 40px;
background-color: #fff;
}

Checkout this demo to see it in action.

Jun 11, 2019, 12:55 AM