Position absolute but relative to parent

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."

So we make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Incase someone wants to postion a child div directly under a parent

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Working demo Codepen

If you don't give any position to parent then by default it takes static. If you want to understand that difference refer to this example

Example 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Here parent class has no position so element is placed according to body.

Example 2::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

In this example parent has relative position hence element are positioned absolute inside relative parent.

In a use case of needing a sticky floating "back button"/ "back to top" button. But you have the main content area that can shrink in favor of the side content area

You can use position: fixed; inside a container of position: absolute; to get a more flexible behavior similar to sticky but more powerful

function toggleOpen() { const element = document.getElementById("sideContnet"); if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } } .container { display: flex; margin: 0 auto; width: 600px; } .contentBig { width: 600px; min-width: 66%; position: relative; } .contentSmall { width: 230px; min-width: 33%; } .absolute { position: absolute; top: 0; right: 0; bottom: 0; width: 60px; } .fiexBack { position: fixed; background-color: red; bottom: 20px; padding: 5px; } .button { width: 200px; padding: 12px; background-color: coral; margin: 0 auto; } toggle open side content

Full Code Example