CODEWITHSUNDEEP
htmlcsscss-position
user3168806
user3168806

Reputation: 11

Why is my position:absolute not obeying my position:relative div?

Could anyone explain to me please why my position:absolute div is not obeying my position:relative div?

I'm sure it's something really simple, but I can't for the life of me see what it is.

I would like to see the position:absolute div (class-2) positioned inside of the position:relative div (class-1).

These are the two class', full link to code below:

div.class-1 {
    position:relative;
    background-color:#CCC;
    width: 500px;
    height: 200px;
}

div.class-2 {
    position:absolute;
    background-color:#C96;
    width: 250px;
    height: 100px;
    top:0px;
    right:0px;
}

HTML

<div class="wrapper">
    <div class="before">class-before</div>
    <div class="class-1">class-1</div>
    <div class="class-2">class-2</div>
    <div class="after">class-after</div>
</div>

http://jsfiddle.net/craig_wadman/HMwtN/

Hope that all makes sense?

Upvotes: 1

Views: 260

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272106

The absolute positioned element must be nested inside the relative positioned element for the desired result:

<div class="class-1">
    <div class="class-2">class-2</div>
</div>

Absolute positioning 101: an absolute positioned element is positioned with respect to the closest positioned (relative, absolute or fixed) parent; if there is none then <body> is used (that was the case with your original markup).

Demo here

Upvotes: 5

D. WONG
D. WONG

Reputation: 59

Your class-2 is not within the class-1. Place the after class-2.

 <div class="class-1">
    <div class="class-2">class-2</div>
</div>

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

Its not inside it.

<div class="wrapper">
    <div class="before">class-before</div>
    <div class="class-1">class-1
        <div class="class-2">class-2</div>
    </div>
    <div class="after">class-after</div>
</div>

DEMO HERE

Upvotes: 1

Related Questions