元素的position属性常用值有两个： 1. absolute : 设置此值后，可设置left和right的值，表示该元素在body标签中的绝对位置； 2. relative : 设置此值后，可设置left和right的值，表示该元素相对与其原本位置的距离。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS-DIV布局position的使用</title> <style type="text/css"> div.father { background-color: bisque; height: 200px; } div.son1, div.son1_2 { border: 2px dashed green; padding: 10px; position: absolute; /*设置position: absolute之后, left和right的值表示和body标签的距离*/ } div.son1 { background-color: #56bafa; left: 20px; top: 36px; z-index: 2; } div.son1_2 { background-color: #CC00FF; left: 50px; top: 60px; z-index: 3; } div.son2 { background-color: #ff502c; border: 2px dashed green; padding: 10px; } div.son3 { background-color: #ff502c; border: 2px dashed green; padding: 10px; position: relative; /*设置position: relative, left和right的值表示和原来位置的距离(原来的位置应该刚好在son2下面)*/ left: 10px; top: 20px; } </style> </head> <body> <div class="father"> <div class="son1">absolute-111</div> <div class="son1_2">absolute-222</div> <div class="son2">normal</div> </div> <div class="father" style="margin-top: 20px"> <div class="son2">normal</div> <div class="son3">relative</div> </div> </body> </html>效果图：
