The Stylish Way to Style
CSS 2.1 defines three positioning schemes: Normal flow Inline items are laid out in the same way as the letters in words in text, one after the other across the available space until there is no more room, then starting a new line below. Block items stack vertically, like paragraphs and like the items in a bulleted list. Normal flow also includes relative positioning of block or inline items, and run-in boxes. Floats A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item. Absolute positioning An absolutely positioned item has no place in, and no effect on, the normal flow of other items. It occupies its assigned position in its container independently of other items.[35] [edit] Position: top, bottom, left, and right There are four possible values of the position property. If an item is positioned in any way other than static, then the further properties top, bottom, left, and right are used to specify offsets and positions. Static The default value places the item in the normal flow Relative The item is placed in the normal flow, and then shifted or offset from that position. Subsequent flow items are laid out as if the item had not been moved. Absolute Specifies absolute positioning Fixed The item is absolutely positioned in a fixed position on the screen even as the rest of the document is scrolled[35] [edit] Float and clear The float property may have one of three values. Absolutely positioned or fixed items cannot be floated. Other elements normally flow around floated items, unless they are prevented from doing so by their clear property. left Floats to the left of the line that it would have appeared in; other items may flow around its right side right Floats to the right of the line that it would have appeared in; other items may flow around its left side clear Removes the float property from an item it can be clear:left;, clear:right; or clear:both; [35][36]
