Div hierarchy

  • Background is the area wrapped outside the border

Second, the position

1.static

Static positioning is the default positioning of elements. It is the equivalent of none in border, which is used static

The selector {position: static; 
}
Copy the code

2.relative

Relative positioning is when an element moves relative to its original position

The selector {position: relative; 
}
Copy the code

2.1 Application Scenarios

  • Used for displacement (rarely used now)
  • Used to father absolute elements

2.2 the characteristics of

  • It moves relative to its original position (the reference point for moving position is its original position).

  • Where the standard stream was, the box behind it still treats it like the standard stream.

    Therefore, there is no de-scaling of relative positioning. Its most typical use is for absolute positioning

2.3 cooperate with z – index

  • Z-index: the default value is auto. No new cascading context is created
  • Z-index :-1/-2/0/1/2 creates a new cascading context

3.absolute

Absolute positioning is when an element moves relative to its ancestors

Absolute positioning no longer occupies the original position. So absolute positioning is ** (off-scaling) ** off the standard flow

The selector {position: absolute; 
 }
Copy the code

3.1 Application Scenarios

  • Move away from the original position and create another layer, such as the close button of a dialog box

  • The mouse prompt

tips:left 50% transformX(-50%) : Achieve horizontal center alignmentCopy the code

3.2 the characteristics of

  • If there is no ancestor element or the ancestor element is not located, it is located based on the browser (Document Document)

    If the ancestor element has positioning (relative, absolute, fixed positioning), the nearest level of the positioned ancestor element is used as the reference point to move the position

3.3 cooperate with z – index

4.fixed

Fixed positioning is where the element is fixed in the browser’s viewable area.

The selector {position: fixed; 
}
Copy the code

4.1 Application Scenarios

  • Browser ads

  • Back to top button

4.2 the characteristics of

  • Move elements with the browser’s visual window as a reference point. It has nothing to do with the parent element; Does not scroll with the scroll bar.
  • Fixed position does not occupy the original position
  • Try not to use it on your cell phone, there are many pits

4.3 cooperate with z – index

5.sticky

Viscous positioning can be thought of as a mixture of relative and fixed positioning.

The selector {position: sticky; 
     top: 10px; 
 }
Copy the code

5.1 the characteristics of

  • Move elements using the browser’s visual window as a reference point (fixed positioning feature)

  • Sticky positioning occupies the original position (relative positioning characteristics)

  • To take effect, you must add one of top, left, right, or bottom

  • Use with page scrolling. Poor compatibility, IE does not support.

3. Cascading context

Definition: A cascading context is a three-dimensional representation of HTML elements laid out along an imaginary Z-axis relative to the user as the user faces a window or web page. All HTML elements occupy this space in order of priority based on their element attributes.

1. Create a cascading context

  • Document root element (<html>);
  • positionA value ofabsolute(Absolute position) orrelative(Relative positioning) andz-indexValues are not forautoThe element;
  • positionA value offixed(fixed position) orsticky(viscous localization) element
  • flexChild elements of the container, andz-indexValues are not forauto;
  • gridChild elements of the container, andz-indexValues are not forauto;
  • opacityAttribute value less than1The elements of the
  • The values of any of the following attributes are notnoneThe elements:
    • transform
    • filter
    • perspective
    • clip-path
    • mask / mask-image / mask-border
  • isolationAttribute values forisolateThe element;
  • -webkit-overflow-scrollingAttribute values fortouchThe element;
  • The will-change value sets any property that, at non-initial, creates elements of the cascading context;
  • containAttribute values forlayout,paintOr a composite value containing one of them (e.gcontain: strict,contain: content).

2. Cascading context order

  • When there is a distinct cascade level indicator, such as the recognized Z-index value, the one with the largest cascade level value overwrites the one with the smallest one in the same cascade context

  • When elements are cascaded at the same level and in the same order, the last element in the DOM flow overwrites the first.