When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive.
Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the child element using the 'top' property.
After gaining an understanding of how the 'top' property works on relatively positioned elements, it became clear why the proper height value is not being maintained.
My question now is:
"Is there a way to factor in this 'top' property in the height of the parent without resorting to paddings or margins?"
Feel free to check out my code on CSSDeck:
Or you can see a simplified version below:
HTML:
<div>
<div class="relative">
</div>
</div>
CSS:
.relative {
position: relative;
top: 42px;
height: 40px;
width: 100%;
background: red;
}
Thank you.