Absolutely in relation to?

Where an absolutely positioned element ends up on a web page depends on whether the element has a positioned ancestor. If it does not, it ends up in relation to the viewport. If it does have positioned ancestors, it will end up in relation to the nearest one. Positioned? An ancestor is positioned if it is 'position: absolute' or relative or fixed. A most common aim is to make an element position itself in relation to a parent. For just this purpose, giving the parent a position of relative with no offsets for top, left, etc. is the simplest way. And it is this simple case that is illustrated on this page

This is a yellow container, its 'position: relative' bestowing its absolutely positioned descendant with 'a nearest positioned ancestor', to trigger a good browser to place this descendant in relation to this ancestor rather than to the viewport. If you really want it in relation to viewport, do not 'position' its parent here.

.one {
position: relative;
color: #000;
background: #cfc; 
width: 800px;  
height: 10em;
padding: .5em;
}

.two {
position: absolute;
left: 50%;
bottom: 0;
color: #000;
background: #fcc;
padding: .5em;
}

<div class="one">... This is a yellow container,
its 'position: relative' ... 
<div class="two"> This is an absolutely positioned green div
inside a (relatively) positioned yellow div.
</div>
</div>