CODEWITHSUNDEEP
htmlcss
Nathanael
Nathanael

Reputation: 7153

Position DIV relative to another DIV?

Is it possible to position a DIV relative to another DIV? I imagine this can be done by first placing it inside of the reference DIV, and then using position: relative. However, I can't figure out how to do this without affecting the contents of the reference DIV. How can I do this properly?

See: http://jsfiddle.net/CDmGQ

Upvotes: 62

Views: 204548

Answers (4)

Nishu Tayal
Nishu Tayal

Reputation: 20820

You need to set postion:relative of outer DIV and position:absolute of inner div.
Try this. Here is the Demo

#one
{
    background-color: #EEE;
    margin: 62px 258px;
    padding: 5px;
    width: 200px;
    position: relative;   
}

#two
{
    background-color: #F00;
    display: inline-block;
    height: 30px;
    position: absolute;
    width: 100px;
    top:10px;
}​

Upvotes: 18

Dinesh Pathak DK
Dinesh Pathak DK

Reputation: 305

you can use position:relative; inside #one div and position:absolute inside #two div. you can see it

Upvotes: 3

sachleen
sachleen

Reputation: 31121

You want to use position: absolute while inside the other div.

DEMO

Upvotes: 4

rhino
rhino

Reputation: 13881

First set position of the parent DIV to relative (specifying the offset, i.e. left, top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want.
It's simple and should do the trick well.

Upvotes: 104

Related Questions