css layout (positioning)

Positioning

Function: 1, special position 2, coverage effect
Features: where you want to put the box where you want to
position type: relative positioning absolute positioning
positioning orientation value: left :; top :;
bottom :; right :;

Relative positioning

Will not be used as a layout to slightly adjust the position of elements
Reference location:
Relative to its original position in the upper left corner, but after moving it will still retain the original position
(will leave a blank for the interface)-"will not use it as a layout

position:relative;
left：100px;
top: 100px;

relative: The object follows the regular flow, and refers to its position in the regular flow through the top, right, bottom, and left positioning offset properties to offset without affecting any elements in the regular flow.

Absolute positioning: will do the layout

absolute: The object deviates from the normal flow. At this time, the offset attribute refers to the closest positioned ancestor element. If there is no positioned ancestor element, it will be traced back to the body element. The offset position of the box does not affect any elements in the regular flow, and its margin is not folded with any other margin.
Absolute positioning is based on the closest parent element with relative or absolute attributes.
Reference location :? The default is the upper left corner of the body, not the upper left corner of the browser window, which
can change the position of the box and produce a gland effect

The higher the div structure in the lower box, the higher the level

<div class="box1"></div>
    <div class="box2"></div>

      .box1 {
            width: 200px;
            height: 200px； 
            background-color: red;
            /* 保留原先的位置，留下空白
             position: relative;
            left: 50px;
            top: 50px; */
            position: absolute;
            left: 50px;
            top: 50px;


        } 
        .box2 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: skyblue;
    

        }

Here the blue level is obviously higher, the blue box is in front of the red

/ * The level attribute is to adjust the front and back display of the box z-index: n *;

** Conclusion of the sons and daughters (so that the page layout is more stable)