Position DIV relative to another DIV?

HtmlCss

Html Problem Overview


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

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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;
}​

Solution 3 - Html

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

DEMO

Solution 4 - Html

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNathanaelView Question on Stackoverflow
Solution 1 - HtmlrhinoView Answer on Stackoverflow
Solution 2 - HtmlNishu TayalView Answer on Stackoverflow
Solution 3 - HtmlsachleenView Answer on Stackoverflow
Solution 4 - HtmlDinesh Pathak DKView Answer on Stackoverflow