On Position

On Position

html css position fixed relative

Search for: html css position fixed relative

start with its definition


relative
absolute
fixed
static
inherit

elements are rendered in order as it happens in a browser.

your position is with respect to the whole window left top.

naming of absolute is weird. it means position this element absolutely so many pixels off with respect to (relatively) its parent!

Although it has weird definition, it seem to indicate make my children's positions relative to me, without which they are relative to the window top left.

In that sense a "relative" instruction is resetting the relative position for my children as my current position.

use my position instruction as that of my parent. 


<div style="position:relative">
<!-- Position these as usual in linear flow -->...
...
...
    <!-- Position these with respect to the parent above -->...
   <div style="position:absolute;bottom:10px;left:10px"> 
   ....
   </div>

</div>

Here is an introductory article


paint this div on top through a z-index
Reset the relative position for its children's absolutes


always relative to the top left
is not affected by scrolling

Here are some nice visual examples of these items

Here is another extensive article on positioning

Here is another: how well do you know positioning

Its worth a read

The elements around a relatively positioned element act as though that shift didn?t exist. They ignore it.

The relatively positioned element is taken out of the normal document flow, but still affects the elements around it. Those elements just act as though the positioned element is still in the normal document flow.

Here is an article on collapsing margins