CSS Position

The values are as follows:

  • Static Default value, indicating document flow.
  • Relative positioning, up, but not out of the document stream. (Usually used with absolute)
  • Abosolute absolute location, the datum is the nearest location in the ancestor. Usually used with relative.
  • Fixed positioning, positioning reference is viewport

Viewport is an area of the browser where the content of the page is displayed, not including the navigation bar.

  • Sticky position (when you set this position, when you look at the following content, the corresponding element will stay in a certain position, and will not change position as the scroll bar drops down.)
  • Note: The box with the positioning is on top of the text.

Experience:

  1. Child absolute father: write absolute, usually need to add a father absolute.
  2. If you write absolute, you need to write top and left values, do not leave the default, otherwise it is easy to make mistakes.
  3. Sticky compatibility is poor.
  4. Fixed location is buggy on mobile, so try not to use this property on mobile.
  5. If the parent element has a Transform attribute, the positioning effect will be affected. This situation should be avoided during development.

Cascading context

  • Each cascading context is a new world, also known as a scope.
  • The z-index of an element in a scope is not compared to an external element, but to an element in the same scope.

There are several ways to create a cascading context

  • Set z-index, as long as z-index is not AUTO, then the cascading context is created.
  • Set the flex
  • Set the opacity
  • Set the Transform property
  • CSS properties are disgusting, and many of the consequences are unpredictable!