position

box-sizing

This section describes the CSS basic subrack and box model

position

The CSS Position property is used to specify how an element is positioned in a document. The top, right, bottom, and left attributes determine the final position of the element.

The values Whether to leave the document flow Whether to retain the original position of the element Offset with respect to what position application note
static no is Don’t shift The default value. The position and layout remain the same. (Normal layout, the current layout position of the element in the document flow) At this timetop.right.bottom.left 和 z-index Attribute is invalid.
relative is is Original position of element Keep the original position. Position offset when no position is added to the relative element. Position :relative invalid table-*-group, table-row, table-column, table-cell, table-caption elements.
absolute is no The most recent non-static locating ancestor element (relative to ICB (inital Container block, initial containing block) when such an ancestor element does not exist) Do not retain the original position, offset Absolutely positioned elements can be set to margins and won’t merge with other margins.
fixed is no Screen ViewPort As the screen scrolls, the element remains in the same position relative to the Viewport fixedProperty creates a new cascading context. The ancestor of the elementtransform.perspective 或 filterProperties ofnoneIs changed from the viewport to the ancestor.
sticky Nearest scrolling ancestor * andcontaining block(Nearest block-level ancestor) The element is positioned relative before crossing a certain threshold, then fixed (often used to locate the head element of an alphabetic list)

Relative (relative position)

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
Copy the code

Absolute (Absolute position)

#three {
   position: absolute;
   top: 20px;
   left: 20px;
}
Copy the code

4. fixed

#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
Copy the code

Sticky (sticky positioning)

#one { position: sticky; top: 10px; }
Copy the code