<head>. They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.Positioning.
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.
Position: Top, Bottom, Left, And Right.
There are four possible values of thepositionproperty. If an item is positioned in any way other thanstatic, then the further propertiestop,bottom,left, andrightare 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. The element is positioned in relation to its nearest non-static ancestor.
- Fixed.
- The item is absolutely positioned in a fixed position on the screen even as the rest of the document is scrolled.
Float And Clear.
Thefloatproperty 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 theirclearproperty.- Left.
- The item floats to the left of the line that it would have appeared in; other items may flow around its right side.
- Right.
- The item floats to the right of the line that it would have appeared in; other items may flow around its left side.
- Clear.
- Forces the element to appear underneath ('clear') floated elements to the left (
clear:left), right (clear:right) or both sides (clear:both)