css（display，float，position）

display is used to set the display mode of elements

display : block | none | inline | inline-block

inline: Specify the object as an inline element

block: Specify the object as a block element

inline-block: Specify the object as an inline block element

none: hidden objects

float Control whether the element is displayed as floating

float : none | left | right

none: Set the object not to float

left: Set the object to float on the left

right: Set the object to float on the right

Purpose of floating:

is to break the default display rules of document flow. If you want the elements to be displayed according to our layout requirements. At this time, you need to use the float attribute

1. Any element declared as float is automatically set to a "block-level element"
2. In standard browsers, floating elements are out of the document flow, so the elements after the floating element will occupy the position where the floating element should have been
3. If there is not enough space horizontally for the floated element, move to the next row
4. The text content will be wrapped around the floating element
5. Floating elements can only float to the left or right side

clear clear float

clear : none | left | right | both

none: Default value. Allow floating objects on both sides

left: No floating objects are allowed on the left

right: No floating objects are allowed on the right

both: No floating objects allowed

position How the object is positioned

position : static | absolute | fixed | relative

static: Default value. Without positioning, objects follow normal flow. At this time, the 4 positioning offset attributes will not be applied

relative: Relative positioning, the object follows the regular flow, and will not affect any element in the regular flow when it is offset with reference to its position in the regular flow through the four positioning offset attributes of top, right, bottom, and left

absolute: Absolute positioning, the object breaks away from the regular flow. At this time, the offset attribute refers to the positioned ancestor element closest to itself. If there is no positioned ancestor element, it goes back to the body element. The offset position of the box does not affect any elements in the regular flow, and its margins are not collapsed with any other margins

fixed: fixed positioning, consistent with absolute, but the offset positioning is based on the window. When the scroll bar appears, the object will not scroll with it

absolute Description:

1. Out of document flow
2. Position by top,bottom,left,right
3. If the parent element position is static, it will be positioned at the origin of the body coordinates
4. If the parent element position is relative, the parent element will be positioned

Example: div { position: absolute; left:100px; top:100px;}

relative Description:

1. Relative positioning (relative to your original position)
2. Do not break away from the document flow
3. Refer to its own static position through top, bottom, left, right positioning

Example: div { position: relative; left:100px; top:100px;}

fixed Description:

Fixed positioning is actually just a special form of absolute positioning. Fixed-positioned elements are fixed relative to the browser window, not relative to their containing elements. Even if the page is scrolled, they will still be in the browser window as before. Exactly the same place

Example: div { position: fixed; right:0; bottom:0;}

z-index Stacking order of objects

z-index : auto | number

When elements overlap, you can set the order of their stacking through the z-index attribute

Objects with larger number values ​​will be overlaid on objects with smaller number values