I'm struggling to grasp the concept of nested divs and how they work together. I understand that when you have a "position absolute" element inside a "position relative" element, the former looks for the latter as its reference point. But what happens when you have a "position absolute" element inside another "position absolute" element? How does it determine which element to use as its "position relative"?
.container {
border: 2px solid black;
width: 500px;
height: 500px;
position: relative;
}
.absolute1 {
position: absolute;
width: 220px;
height: 220px;
border: 2px solid black;
background-color: red;
bottom: 25%;
right: 25%;
}
.absolute2 {
position: absolute;
height: 70px;
width: 70px;
border: 2px solid black;
background-color: green;
left: 10%;
bottom: 10%;
}<div class="container">
<div class="absolute1">
<div class="absolute2"></div>
</div>
</div>From the result, it appears that absolute2 is positioned relative to absolute1. However, shouldn't it be in relation to container, as it is the first parent with a "position relative"? Can anyone provide an explanation on how this mechanism works?