On Position
satya - 6/28/2013 10:12:36 AM
html css position fixed relative
html css position fixed relative
satya - 6/28/2013 10:14:51 AM
Carries the following values
relative
absolute
fixed
static
inherit
satya - 6/28/2013 10:15:16 AM
By default it is static
elements are rendered in order as it happens in a browser.
satya - 6/28/2013 10:15:50 AM
fixed
your position is with respect to the whole window left top.
satya - 6/28/2013 10:19:48 AM
absolute is 'relative'
naming of absolute is weird. it means position this element absolutely so many pixels off with respect to (relatively) its parent!
satya - 6/28/2013 10:22:08 AM
So what is relative then?
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.
satya - 6/28/2013 10:22:43 AM
inherit
use my position instruction as that of my parent.
satya - 6/28/2013 10:25:22 AM
How it is often used
<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>
satya - 6/28/2013 10:37:59 AM
Relative seem to do 2 things
paint this div on top through a z-index
Reset the relative position for its children's absolutes
satya - 6/28/2013 10:40:30 AM
Something else about fixed
always relative to the top left
is not affected by scrolling
satya - 6/28/2013 10:42:18 AM
Here are some nice visual examples of these items
satya - 6/28/2013 10:46:49 AM
Here is another extensive article on positioning
satya - 6/28/2013 10:54:44 AM
Here is another: how well do you know positioning
Here is another: how well do you know positioning
Its worth a read
satya - 6/28/2013 10:55:20 AM
quote from there
The elements around a relatively positioned element act as though that shift didn?t exist. They ignore it.
satya - 6/28/2013 10:56:08 AM
more...
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.
satya - 6/28/2013 11:01:18 AM
Here is an article on collapsing margins