Imagine having two nested divs like the following:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="width:100%">
</div>
</div>
</body>
</html>
Currently, the inner div has a width of 100% of 50% of the screen size, which equals 50% of the screen size. But what if we change the inner div to have an absolute position, like this:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="position:absolute;width:100%">
</div>
</div>
</body>
</html>
With this change, the inner div now occupies 100% of the screen space due to its absolute position.
So here's the question: Is there a way to preserve the relative width of the inner div even when its position is set to absolute?