Position has four attributes: relative, Absolute, fixed, and static. Three uncommon inherit, initial, sticky, and unset

  • Top, left, right, and bottom will not work if Position is static.
  • With the Position attribute, we can offset an element relative to its normal position, parent element, or browser window.

Static: This is the default value of position. Either position is not set or position is set :static does not affect the layout of the div (or other tag), it will be where it should be. Position :static, top, left, right, bottom will not work if you set position to static, top, left, right, bottom. You can reset an element to static after changing its position property to return it to the default document flow on the page.

Relative: Objects follow normal document flow and are positioned relative. Will offset position in normal document flow based on top, right, bottom, left, etc. If both left and right exist, only left is valid. If both top and bottom exist, only top is valid. The relative offset is based on the upper left margin of the object. Note: Display set to table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, Table -cell and table-caption elements do not apply position: relative. It would be strange if table-cell elements were not relative to their normal position.

Absolute: The object is out of normal document flow. Absolute positioning. Use top, right, bottom, left attributes for absolute positioning. And the cascade is defined by the Z-index property. Margins of absolutely positioned elements also do not fold between them. When the position attribute of the parent element is static (i.e. position:relative is not set), absolute is positioned relative to the browser window (the parent element is HTML ).

Fixed: The object is out of the normal document flow. Use the top, right, bottom, and left attributes to locate the browser window as a reference point. When a scroll bar appears, the object does not scroll along with it. This property is not supported below IE6.

Inherit: Specifies that the value of the position property should be inherited from the parent element. Internet Explorer 7 and later do not support this attribute

Sticky: a new attribute of CSS3. It behaves like a combination of position:relative and position:fixed:

Initial: Set positon to the default value (static). Internet Explorer does not support this attribute. The initial keyword can be used for any CSS attribute on any HTML element and is not postion-specific.

Unset: sets the positon value to unset:

  • If the default property of the property is inherited (for example, font default properties are almost inherited), the value is equivalent to inherit
  • If the default attribute is not inherited (for example, pisition is static), this value is equivalent to initial

When an element position is set to absolute or fixed, three things happen:

  1. By moving the element one layer in the Z direction, the element is removed from the normal flow, so it no longer occupies the space of the original layer and overwrites the elements below.
  2. The element becomes a block-level element, which is equivalent to setting display: block to the element; Set absolute to an inline element, such as , and find that it can set width and height.
  3. If the element is block-level, the element’s width is changed from width: 100% (on a row) to auto.