ansaurus

Question

Answer 1

+7 A:

Apply position:relative to the parent div.

<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>

Andy E 2010-09-30 12:34:48

Answer 2

+2 A:

You need to give parent div relative position first:

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

Sarfraz 2010-09-30 12:34:52

Answer 3

+2 A:

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

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

Pekka 2010-09-30 12:34:53

Answer 4

+2 A:

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.

Santhosh 2010-09-30 12:36:04

Answer 5

+1 A:

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>

Rajasekar 2010-10-01 06:51:35

ansaurus

tags:

views:

answers:

Absolute position is not working

related questions