The position property is used to specify how an element is positioned in a document.

Document flow Normal flow

Is the normal flow direction of the document;

  1. From left to right (for an inline element such as a span element, the line is wrapped until the line is full), the width cannot be specified with width; We don’t use height;
  2. From top to bottom (block elements, such as div elements, are in a row and do not appear side by side), we can use width to calculate the width; You can also set height;

3. There is also an inline-block element that combines the characteristics of inline and block, using width and height. Just set diaplay:inline-block in the SPAN element.

When the content is larger than the container

Overflow occurs when the width and height of the content are greater than the container; Use Overflow to set whether scroll bars are displayed. Auto is flexible; Scroll is forever display; Hidden is the part that is directly hidden from view; Visible is the part that shows the overflow directly; Overflow can be divided into overflow-x and overflow-y

Out of document flow

Float position: Absolute /fixed: the document is no longer in the span box after the above attributes are added.

The position of the value

Static default, which remains in the document flow; A. relative B. rising C. not out of the flow of documents The base of the position is non-static in the ancestor; Fixed Fixed sticky sticky positioning

experience

If you write absolute or fixed, you must write a “top” and “left” (relative) for absolute or fixed.

Position: relative

Usage scenario Used for displacement (rarely used) used for absolute elements dad z-index Z-index :auto Default, does not create a new cascading context; Z-index :0/1/2 Z-index :-1/-2 If relative is used alone,

Position: absolute

If only abolute is used, the width of this module changes with the size of the content; Move out of the document flow to the top left corner of the browser based on the up, down, left, and right attributes;

Position: fixed

The top right corner of the page is X, usually fixed;