![]()
定位布局：相对定位、绝对定位和固定定位
相对定位：以自身初始状态为基准进行定位，定位父级为自身，但初始状态受包含父级（非定位父级）影响
绝对定位：以最近的position属性非static的定位父级为定位基准，如一直未能找到static的定位父级，则以html为基准进行定位
固定定位：以html最初包含块或者视口为定位父级进行定位，完全不收其他因素影响
以上区别在示例代码中：right：400px能够清楚看出区别
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位布局：相对定位、绝对定位和固定定位</title></head><body> <style> .buju{ width:800px; height:200px; border:3px solid red; position:relative; margin-bottom: 10px; margin-left:auto; margin-right: auto; } .dingwei1{ width:400px; height:100px; border: 2px dashed green; position:relative; right:400px; text-align: center; } .dingwei2{ width:400px; height:100px; border: 2px dashed yellow; position:absolute; right:400px; bottom: 10px; text-align: center; } .dingwei3{ width:400px; height:100px; border: 2px dashed blue; position:fixed; right: 400px; bottom:20px; text-align: center; } </style> <div class="buju"> <div class="dingwei1">相对定位示例</div> </div> <div class="buju"> <div class="dingwei2">绝对定位示例</div> </div> <div class="buju"> <div class="dingwei3">固定定位示例</div> </div></body></html>