Make delicious recipes!

Chapter 9: Position styles



CSS can be used to fine-tune the placement of an element in the page.

Positioning can be of three types:

1) Absolute: Absolute positioning specifies an absolute position from the top left of the page.
2) Relative: Relative positioning moves an element relative to its natural ordering in the page.
3) Fixed: Fixed positioning keeps the element at the same position during scroll.


Consider the following two divs:

Some text here
is continued after the above div





Example of absolute positioning:

Some text here
position:absolute;
left:450px;
top:600px
is continued after the above div





Note that the 450px,550px is specified from the top left corner of the webpage.
This can be somewhat risky thing to do because the size of the webpage is
device dependent. So if this page is viewed on a mobile screen, then the layout
will be completely different and absolute positioning may not be correct.




Example of relative positioning:

Some text here
position:relative;
left:40px
is continued after the above div




Fixed positioning is very similar to absolute positioning.
Only difference is that 'fixed' position remains unaffected by scroll.
position:fixed;
left:200px; top:500px;



The distance can be specified from four edges: top, bottom, right, left

Right position
Some text here
position:relative;
right:40px
is continued after the above div


Bottom position
Some text here
position:relative;
bottom:5px
is continued after the above div








Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal