The difference between layout and positioning: Layout is on the screen plane, positioning is perpendicular to the screen

Div layered

The position values

  • staticDefault, the current element is in the document flow
  • relativeRelative positioning, rising, but not out of the document flow
  • absoluteAbsolute location, location based on ancestorsThe static
  • fixedFixed positioning, positioning basedViewPort
  • stickyViscous positioning

Pay attention to

  • If you wroteabsolutE is usually replaced by onerelative
  • If you wroteabsoluteandfixedBe sure to filltopandleft
  • stickyPoor compatibility

Position: relative

1. Application scenarios

  • Used for displacement (not often)
  • Used to parent absolute

2. Cooperate with z – index

  • I’m going to write everything I need to do firstpoistion: relative;
  • Auto: The calculated value is 0 by default
  • Zero:
  • The big numbers are higher than the small numbers
  • Integer (positive or negative, 0)
  • Never write z-index:9999

Position: absolute

1. Application scenarios

  • Create a new layer (e.g. close button in a dialog box)

  • The mouse prompt

  • Code sample

2. It can also be used with z-index

  • “Relative” is the same as “absolute”, and no matter the value of position is “relative” or “absolute”, the function of z-index is identical. “relative” and “absolute” do not overlap, and absolute and absolute overlap

3. Usage

  • Add it to whoever is based on (the positioning element in ancestor (non-static element) can be dad or grandpa)position: relative;Write in yourselfPosition: absolute;
  • withtop,bottom,left,rightEtc to locate (Be sure to include at least two. Otherwise, some browsers will display the wrong location)

Experience in 4.

  • See the hover

  • Make the best useleft:100%
  • Make the best useleft:50%And negativemargin

Position: Fixed (try not to use this property on mobile phones)

1. Application scenarios

  • Back to top button
  • Annoying ads

experience

  • Fixed, 100 million bugs will lead to a billion bugs.
  • Fixed will be invalid if you add some attributes to the parent element.

Cascading context

Code sample

metaphor

  • Each cascading context is a new small world (scope)
  • The z-index of this little world has nothing to do with outside
  • This is the same small world in the Z-index can be compared

Which properties can create a cascading context

The key to rememberz-index / flex /opacity / transform

Resources: Cascading context