Absolute position is not working

A

6

38

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

Apostrophize answered 30/9, 2010 at 12:33 Comment(1)

Not an answer to the question in particular, but may be helpful to others experiencing a similar issue to what I was that led to this page: make sure you're not forgetting the units in your position specification. I accidentally used "bottom:79;" instead of "bottom:79px;", and was puzzled why it was at the top of the page. – Larainelarboard 3/6, 2020 at 1:17

O

76

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>

Overcloud answered 30/9, 2010 at 12:34 Comment(2)

The issue with this is parent div's css is applied to child div's css, like opacity, etc. difficult to debug. – Reticle 11/2, 2019 at 14:30

And so folks, as you can see, with CSS, absolute means relative. – Etti 11/1 at 6:52

A

11

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.

Amateurish answered 30/9, 2010 at 12:36 Comment(1)

My element's nth-parent has a position other than the default, but I need my element to be placed absolutely on top left of the window, so exactly the opposite of this question. Can it be helped? Why does it work like that? – Risser 1/6, 2016 at 8:32

S

7

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

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

Sized answered 30/9, 2010 at 12:34 Comment(0)

W

4

You need to give parent div relative position first:

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

Whimwham answered 30/9, 2010 at 12:34 Comment(0)

H

1

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!

Honeysucker answered 9/7, 2015 at 16:2 Comment(0)

M

0

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>

Mesh answered 1/10, 2010 at 6:51 Comment(0)

Recommended topics

Hot tags