Relative positioning and absolute positioning

Relative positioning and absolute positioning

 In addition to based on “ The document flow ” The positioning of ,CSS Other positioning methods of labels are also defined ,CSS Use position Property specifies how the label is positioned 
position Value 

static, The default value is , That is, based on “ The document flow ” The positioning of
relative, Relative positioning , That is to say “ The document flow ” On the basis of , combination left and top attribute , Relative positioning
absolute, Absolute positioning , I.e. disengagement “ The document flow ”, And based on its “ Include box ”, Use left and top Property to locate
fixed, Fixed position , That is, special absolute positioning , That is, its “ Include box ” For browsers

position:relative;( Relative positioning )

Be careful ：
Relative to the original position , Use left,right Offset
The location of the original position for subsequent elements (float) Is still valid
For the use of float The elements of ,realative It also works

position:absolute;( Absolute positioning )

Be careful :
Absolute positioning is off ” The document flow “,
When using absolute positioning , Pay attention to alignment ” Include box “, Include this tag , And the one closest to it ,position It's not equal to static The label of
without , Then it will be located based on the upper left corner of the browser
special
Define only position:absolute; No settings left and top, The label position is still installed “ The document flow ” location , But already “ Off stream ”