The understanding and application of three kinds of position in CSS format and layout

First position relationship: position:fixed lock Position (relative to the location of the entire browser), commonly used in the lower right corner of the major websites or in other locations of small ads.

If you need to adjust the lock position, you need to use the following way: <div style= "width:300px; height:300px; position:fixed; top:0px, left:0px, right:0px, bottom:0px"></div>

Second position relationship: Position:absolute absolute Position (relative to parent element-browser, absolute location of ancestor)

(1) There is no absolute at the outermost, then when the div is adjusted relative to the browser, (2) The outermost is absolute, then the div changes relative to the outermost boundary when adjusting.

If you need to adjust the absolute position, you need to use the following way: <div style= "width:300px; height:300px; Position:absolute; top:0px, left:0px, right:0px, bottom:0px"></div>

Third position relationship: Position:relative relative position (relative to where it should appear)

If you need to adjust the relative position, you need to use the following way: <div style= "width:300px; height:300px; position:relative; top:0px, left:0px, right:0px, bottom:0px"></div>

The understanding and application of three kinds of position in CSS format and layout