Trying to grasp the concept, I experimented with the following setup:
<div id="Outer">
<div id="Inner"></div>
</div>
In this scenario, the outer div has a relative position and the inner div has an absolute position. This allows us to position the inner div wherever we desire inside the "Outer div" (top / left / bottom etc').
To delve deeper into how positioning works, I created the following structure:
- Outer div.
- Inner div within the outer div.
- Inner div nested inside the inner div.
Despite changing the position of the innermost div to absolute, I noticed that I could still position it successfully. This raised questions about why this was possible even though the parent div (div number 2) is set to position: absolute, rather than position: relative as expected.
I would appreciate an explanation on why this specific arrangement functioned as intended. Below is the complete code for reference:
<html>
<head>
<style type="text/css">
.OuterDiv {
padding: 0px;
margin: 0px auto 0px auto;
width: 500px;
height: 300px;
background-color: #E6E6E6;
overflow: hidden;
position: relative;
}
.InnerDiv {
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
background-color: #D3DEEF;
overflow: hidden;
}
.InnerInner {
position: absolute;
top: 20px;
right: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="OuterDiv">
<div class="InnerDiv">
<div class="InnerInner">Inner Inner</div>
</div>
</div>
</body>
</html>