I'm currently working on adjusting the positioning of elements using transform: translateY in CSS. The challenge I am facing is eliminating the empty space that appears between elements after repositioning one element below another without altering the code for the surrounding elements.
My initial approach was to set a negative margin-bottom value based on the percentage of the element's size, but this calculation is based on the width rather than the height. Another consideration was to utilize absolute positioning, yet this strategy proved challenging due to unknown content sizes within the elements.
Do you have any suggestions on how to achieve seamless alignment between elements solely through CSS?
div {
padding: 50px;
}
.wrapper {
background-color: green;
position: absolute;
width: 500px;
height: 500px;
}
.above {
background-color: red;
}
.moved {
background-color: blue;
transform: translateY(-50%);
}
.below {
background-color: yellow;
}<div class="wrapper">
<div class="above">
</div>
<div class="moved">
</div>
<div class="below">
</div>
</div>EDIT: To clarify further: The individual divs represent distinct sections within my template. As these components are designed for reuse, modifications to other sections (both above and below) are not an option. Therefore, I am seeking a solution where the repositioned section only occupies the necessary space post-translation.