Home/ Questions/Q 1928496
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T06:59:09+00:00

I’m trying to place a div with id ‘absPos’ in absolute position in relation

  • 0

I’m trying to place a div with id ‘absPos’ in absolute position in relation to its parent div. But it is not working, the div is placed at the top left corner of the page.

My code sample is as follows

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

Can you help me to solve this issue.
In my actual case instead of the red background color I’ve to place a background image.

Regards

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In your code, none of the ancestors are “positioned” elements, so the div is offset from body element, which is the offsetParent.

    The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child’s offsetParent.

    <html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px; position: relative;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>
    • 0