The positioning of CSS in HTML

1. Positioning and Floating:

2. Everything is box:

Block element: Div,h1,p ... Row element: The meaning of the Span,strong......position property value: Thestatic element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element. The relative element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. The absolute element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. The fixed element box behaves like the position is set to absolute, but its containing block is the window itself. Tip: Relative positioning is actually considered part of the normal flow positioning model, because the position of the element relative to its position in the normal stream

3. Relative positioning:

The element box set to relative positioning offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. #box_relative {    position:relative;    left:30px;    top:20px;}

4. Absolute positioning:

An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. #box_relative {  position:absolute;  left:30px;  top:20px;}

5. Floating:

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.
Float:right;