When to use CSS positioning?

I am new to the world of coding, XHTML, CSS as well as PHP. I have come across numerous tutorials regarding positioning i.e. relative, absolute a开发者_StackOverflow中文版nd fixed however have no idea when I have to use them or when it is the best to use them. I would appreciate some examples.

---

ALA has a nice tutorial (there're lots of examples) CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.

---

For understanding CSS positioning, you need to get familiarize with the "CSS BOX Model"

There are tons of tutorials online. Here are some good ones with examples for beginners:

http://www.brainjar.com/css/positioning/default.asp

http://www.tizag.com/cssT/position.php

http://www.alistapart.com/articles/css-positioning-101/

---

Two that I frequently use are:

Relative positioning: helps you style elements relative to other elements. E.g. you want to move an input to the right relative to the div it's inside.

Fixed positioning: great for things like Refresh suggestions that get 'fixed' so that they follow you wherever you scroll.

It's best to play around with them and see for yourself.

---

To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.

http://www.handycss.com/how/how-to-use-css-positioning/

---

My understanding is that we should use positioning either when we want to place any CSS element with respect to view port(position:fixed) or we want to place CSS element with respect to container(container get position:relative and child get position:absolute). But you should know limitation before using position absolute or position fixed. Absolute and fixed don't contribute to height of the parent element. This can create various unexpected results. Suppose you want to apply background image on relative element which has absolute element containing most of content. Background image will not spread over your content as it will not get height of content. Also you should not heavily rely on top/left/bottom/right for placing elements. They might help you to get expected arrangement on one view port size but can distort it completely on other view port size/resolution.