A few points of attention in position positioning

In CSS we will use position to layout, commonly used is three kinds of relative,absolute,fixed

Relative is what we often say relative positioning, relative to the position in the normal document flow, it does not deviate from the normal flow of the document, so after the positioning, the previous position will remain occupied.

<class= "Test">             This is a line of text, which is            a line of text <   style= "width:200px;height:50px;background:yellow;position:relative;top:50px;" ></ Div >        </ Div >

We can see that there is a big gap between the text and the yellow Div, which is because it still occupies the original position. Because there is no out-of-document flow, when you set width:100% in an element that is positioned as relative, it is actually the width of the parent element.

Absolute: The position (or root element) of the element that is not static relative to his nearest and position value is out of the document flow. When we set the width:100%, this 100% is also calculated based on the width of the element (or root element) that is not static from his nearest and position value, not the parent element.

<Divclass= "Wrap">            <Divclass= "Container">                <Divclass= "Main">                </Div>            </Div>        </Div>

. Wrap{width:200px;Height:100px;position:relative; }. Container{width:300px;Height:50px;background:Red; }. Main{position:Absolute;width:100%;Height:100%;background:Yellow; }

We can see that the calculation is not based on the width of the parent element. Of course overflow is also calculated relative to the width of the element (or root element) that is not static for the nearest and position value.

Fixed: is positioned relative to the viewport. So we set width:100% the visible width relative to the browser. is equivalent to setting HEIGHT:100VH. is also out of document flow. So overflow will also be relative to the visible window.

A few points of attention in position positioning