Absolute position is not working

问题

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

回答1:

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>

回答2:

If you are placing an element with absolute position, you need the base element to have a position value other than the default value.

In your case if you change the position value of the parent div to 'relative' you can fix the issue.

回答3:

You need to declare the parent div either position: relative or position: absolute itself.

relative is what you're looking for in this case.

回答4:

You need to give parent div relative position first:

<div style="height: 80px; padding-left: 20px; position:relative;">

回答5:

You can also Apply Position:absolute to the Parent Div. Total Code below

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

            <div style="height: 80px;position:absolute; 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>

回答6:

If, like me, you were trying to position an element over another element, the floating element needs to be inside of the other, not as siblings. Now your position:absolute; can work!

来源：https://stackoverflow.com/questions/3830486/absolute-position-is-not-working

标签

html

css

css-position