CSS在默认的条件下，是按照正常文档流的排列，即为块元素占一行，内联元素依次排列；使用浮动布局（float）可以使布局变得非常灵活，但是不容易掌控，定位布局则可以随心所欲的排列。
固定定位：fixed 说明：相对于浏览器的排列，四边的距离都是相对于浏览器而言，无论是否拖动滚条，所处的位置始终不改变。
相对定位：relative 说明：相对于改元素当前的位置。
绝对定位：absolute 说明：若是父容器没有特殊布局，那么同固定定位；若是父容器已设置为相对定位，那么边距就是到达父容器边界的距离。
静态定位：static
语法： position：布局方式（例：fixed） top： right： bottom： left：
实例
<!DOCTYPE HTML> <html> <head> <style type="text/css"> * {margin:0;}/*外边距清零*/ #p_1 { position:fixed; left:200px; background-color:red; } #p_2 { position:absolute;/*段落2父元素无特殊布局*/ top:50px; left:60px; background-color:green; } div { position:relative;/*段落3父元素相对定位*/ width:300px; height:300px; background-color:gray; margin:0 auto;/*水平居中*/ } #p_3 { position:absolute; top:50px; left:60px; background-color:blue; } #p_4 { background-color:yellow; } #p_5 { position:relative;/*按照正常文档流，段落5应当紧随段落4的下方，但在此处设置了相对布局*/ background-color:black; top:90px; left:60px; color:white; } </style> </head> <body> <p id="p_1">段落1</p> <p id="p_2">段落2</p> <div> <p id="p_3">段落3</p> </div> <p id="p_4">段落4</p> <p id="p_5">段落5</p> </body> </html>