On Position

satya - 6/28/2013 10:12:36 AM

html css position fixed relative

html css position fixed relative

Search for: html css position fixed relative

satya - 6/28/2013 10:13:14 AM

start with its definition

start with its definition

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:27:20 AM

Here is an introductory article

Here is an introductory article

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

Here are some nice visual examples of these items

satya - 6/28/2013 10:46:49 AM

Here is another extensive article on positioning

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

Here is an article on collapsing margins