Positioning and floating in CSS

Positioning and floating in CSS

This article mainly describes the three types of positioning styles in CSS, the difference between static, relative and absolute, and the characteristics of floating elements.

Positioning style

CSS in the positioning style position value has three, the default value: Static, relative positioning: relative, absolute positioning: absolute.

1. Static: When using the default positioning, you can generally not set the position style. Each element is the same as the document flow from top to bottom, while ensuring that the block element exclusive row principle.

2. Relative: Generates relatively positioned elements that are positioned relative to their normal position, with the top, bottom, left, and right styles complete. It does not affect the positioning of other elements in the same container.
   The relative positioning element is not out of the document flow, and its artifact is itself, no matter how you move it, its original position remains, and the parent container affects its layout as usual.

3. Absolute: For an absolutely positioned element, you need to divide its parent element and the positioning of the above elements:

   1. When the Position property is set in the parent element, and the property value is absolute or relative, the child element is positioned relative to the parent element.
   2. The parent element does not have a non-static position property set, and it is positioned with the ancestor of its first non-static position property. If there is no ancestor element with the position attribute, then it will be anchored to the body and positioned according to the browser's window.
      Absolute positioning is the removal of an element completely from the document stream and positioned relative to its parent element (the parent element may be another element in the document or an initial parent element, such as body), and the space occupied by the element originally in the normal document flow is closed as if the element had not existed. The element will no longer affect the layout of other elements in the parent element.

Floating elements

1. If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.

2. A floating element generates a block-level box, regardless of its own element. If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

3. If the floating element skips this line, the browser does not think the line has enough space, and the other Div automatically skips the line during the float, even if the row has room for the other Div.

4. Floating elements are out of the document flow, and elements that are out of the document flow have no actual height and do not open the parent element. Positional properties (Left/top/right/bottom) are not available for floating properties.

5. The text content after the floating element, if it is a Chinese character, will be wrapped automatically, if it is a continuous number or English letter, will not wrap, set word-wrap:break-word; property will force the content to wrap.

Look at the following example.

<style> #container {  position:relative;  width:300px;  height:100px;  background:#039;  }  #A {  float:left;  top:0;  left:0;  width:50px;  height:40px;  background:#C00;  }  </style>

The text that was supposed to surround the red block appears below it because it cannot be wrapped, and some of the text is obscured by the container.

The difference between a floating element and an absolute location

The floating element was designed to make text wrap around the image, and later CSS allowed to float any element. By understanding this design principle, you can understand how it differs from other positioning methods.

1. Absolute positioning is the removal of an element from the document stream completely, and relative to its containing block positioning (containing the block may be another element in the document or an initial containing block), the element originally occupied in the normal flow of the document is closed, as if the element did not exist, the element will no longer affect the layout of other elements.
2. Floating, the floating elements are removed from the normal flow of the document in some way, and floating elements float to the left and right, but they still affect the rest of the document. When an element floats, the other content "wraps around" the element.

Look at the following example

<style>body {      color:#FFF;  }  #container {      position:relative;      width:300px;      height:100px;      background:#039;  }  #A {      position:absolute;      top:0;      left:0;      width:50px;      height:40px;      background:#C00;  }  </style>

After you change the positioning of the a element to float, the contents of the element are then wrapped around it.

 #A { float:left; top:0; left:0; width:50px; height:40px; background:#C00; 

This leads to the concept of text flow and document Flow .

The document flow is speaking relative to the box model.

The text flow is relative to the Yu Wenzi paragraph.

When the element floats, it jumps out of the document stream, meaning that when there are elements behind it, the other element ignores the area it occupies and lays it directly beneath it. But the text will identify with the area occupied by the floating element, around which it is laid out, that is, without dragging the text stream.

But when absolutely positioned, not only will the element box be dragged out of the document stream, but the text will also flow. Then the text of the subsequent element will not be recognized in its regional location, will be directly behind it layout, will not be around.

Positioning and floating in CSS