study notes

##Line height
    line-height
    ——————————— top line (top line)
    ———————— middle line (middle line)
    ——————————— baseline ( ase line)
    ——————————— bottom line (bottom line)
##The relative position of the box
    Relative position: refers to the position of the box relative to the position of
    the box under the original positioning system. Set the position property of the box to relative to enable Relative position
    position: cannot be inherited
    Default value: static static position, the position of the box under the original positioning system
           relative relative to the box is offset relative to the original position

           absolute absolute position 
                                       } absolute positioning  
           fixed relative position

    relative: if a relative position is set to a position If it is fixed, the position he originally occupied is still occupied, and it does not deviate from the
    
    absolute position of the document flow: 1. Leave the document flow
             2. It will find the containing block (upper level) until the value of position ≠ static.
            It is only used when there is a cascading relationship. absolute position
    
    Fixed position: viewport (viewport),
    it can be used for asides with advertisements, navigation, and the bottom right corner when returning to the top
## When the floating element is set to absolute positioning , it
    belongs to absolute positioning, and the float attribute is forced to be set to none
    * Absolute positioning The effect of the element on other elements The
    absolute positioning element will not have any effect on any other element. The
    absolute positioning position
    can be determined by the left, right, top, bottom
    containing block with absolute positioning position: fixed(absolute)
                   position: absolute

    to determine whether the element has
            ↓
    position≠static → No Initialize the containing block
           ↓
    Fill box for this element
    
##
     How to solve the problem of element overlap:
        stack level (stack level)
    It determines who is displayed in front of the element and who is displayed in the back
    Usually, the higher the stack level , the higher the display,
    the stacking level of the element can be set through the z-index property

    z-index: not inheritable
    Default value: auto Normally, the element with the later writing order is displayed in the front
    Possible values: auto Set the stacking level manually, and the elements with high stacking level will display the    
           number in the front

    . Note: 1. Do not use it for statically positioned elements
         2. Try not to use z-index (except for stacking)