One thing I noticed is that when placing an absolutely positioned element within a relatively positioned element, the latter does not automatically inherit the width and height of the former unless manually set. Take this example:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 10vw;
height: 10vw;
background-color: yellow;
border: solid black;
display: block
}
.cont {
position: relative;
display: block;
}
.cont>.box {
position: absolute;
display: block;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="cont">
<div class="box">2</div>
</div>
<div class="box">3</div>
</body>
</html>In the given example, all three boxes are visible, but the second and third ones overlap. Is there a way to make the absolute positioning automatically inherit the parameters of the relative one using only CSS?