CSS provides properties for positioning and floating that allow you to create columnar layouts, overlap one part of a layout with another, and accomplish tasks that for years often required the use of multiple tables.
The basic idea of positioning is simple, it allows you to define where an element's box should appear relative to its normal position, or relative to a parent element, another element or even the browser window itself. Obviously, this feature is very powerful and surprising. It shouldn't be surprising to know that user agents support positioning in CSS2 much better than other aspects.
Floats, on the other hand, were first introduced in CSS1 and were based on a feature added by Netscape in the early days of the Web. Floating isn't exactly positioning, but it's certainly not a normal flow layout either. We will clarify the meaning of float in a later chapter.
everything is a frame A div, h1, or p element is often called a block-level element. This means that these elements appear as a block of content, a "block box". In contrast, elements such as span and strong are called "inline elements" because their content appears within a line, an "inline box."
You can change the type of box generated using the display property. This means that you can make inline elements (such as <a> elements) behave like block-level elements by setting the display property to block. You can also set display to none so that the generated element has no box at all. This way, the box and all its contents are no longer visible and take up no space in the document.
But in one case, block-level elements are created even without explicit definition. This happens when you add some text to the beginning of a block-level element (such as a div). Even if the text is not defined as a paragraph, it will be treated as such:
![div css xhtml xml Example Source Code]()
Example Source Code
[www.downcodes.com] <div>
some text
<p>Some more text.</p>
</div>
In this case, the box is called an unnamed block box because it is not associated with a specifically defined element.
A similar thing happens with lines of text for block-level elements. Suppose you have a paragraph containing three lines of text. Each line of text forms an unnamed box. You cannot directly apply styles to nameless blocks or line boxes because there is no place to apply styles (note that line boxes and inline boxes are two different concepts). However, it helps to understand that everything you see on the screen forms some kind of box.
CSS positioning mechanism CSS has three basic positioning mechanisms: normal flow, float, and absolute positioning.
All boxes are positioned in the normal flow unless otherwise specified. That is, the position of an element in a normal stream is determined by the element's position in X(HTML).
Block-level boxes are arranged one after another from top to bottom, and the vertical distance between boxes is calculated from the vertical margins of the boxes.
Inline boxes are arranged horizontally in a row. Their spacing can be adjusted using horizontal padding, borders, and margins. However, vertical padding, borders, and margins do not affect the height of the inline box. The horizontal box formed by a line is called a line box. The height of a line box is always high enough to accommodate all the inline boxes it contains. However, setting the row height can increase the height of this box.
Below, we’ll explain relative positioning, absolute positioning, and floating in detail.
CSS position property By using the position property we can choose between 4 different types of positioning, which affects how the element's box is generated.
The meaning of the position attribute value:
static
The element box is generated normally. Block-level elements create a rectangular box as part of the document flow, while inline elements create one or more line boxes that are placed within their parent element.
relative
The element box is offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied.
absolute
The element box is completely removed from the document flow and positioned relative to its containing block. The containing block may be another element in the document or the initial containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. The element generates a block-level box after positioning, regardless of what type of box it originally generated in the normal flow.
fixed
The element box behaves like setting position to absolute, except that its containing block is the viewport itself.
Tip: Relative positioning is actually considered part of the normal flow positioning model, because an element's position is relative to its position in the normal flow.
CSS positioning properties CSS positioning properties allow you to position elements.
Property Description
position places the element into a static, relative, absolute, or fixed position.
top defines the offset between the top margin boundary of a positioned element and the top boundary of its containing block.
right defines the offset between the right margin edge of the positioned element and the right edge of its containing block.
bottom defines the offset between the bottom margin boundary of the positioned element and the bottom boundary of its containing block.
left defines the offset between the left margin edge of the positioned element and the left edge of its containing block.
overflow sets what happens when an element's content overflows its area.
clip sets the shape of the element. The element is clipped into this shape and then displayed.
vertical-align sets the vertical alignment of an element.
z-index sets the stacking order of elements.
