Positioning
static positioning position: static
relative positioning position: relative
absolute positioning position: absolute reference points marked off
sub-phase parent must
allow the horizontal and vertical centering cassette absolute positioning
fixed positioning position: fixed
reference point browser left corner
elements fixedly positioned off label does not occupy the position
ie6 low compatibility version does not support fixed positioning
02 absolute positioning applications .html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fa { width: 600px; height: 300px; margin: 60px auto; background-color: skyblue; position : relative ; } / * so that the box is centered horizontally son * / .son { width : 200px ; height : 100px ; background-Color : Pink ; / * margin: Auto 0; absolute positioning box invalid * / position : Absolute ; left : 50% ; / * percentage of the reference width of fathers * / margin-left : -100px ; / * width half their * / top: 50%; margin-top: -50px; /* left: 300px; top: 150px; */ } </style> </head> <body> <div class="fa"> <div class="son"></div> </div> </body> </html>