本文共 779 字，大约阅读时间需要 2 分钟。

相对定位：相对定位：相对于自己原来的位置！

绝对定位： 绝对定位：相对于最近的非static定位(有定位的)祖先元素

 

* {    // 默认值：无任何定位    position: static;    // 相对定位：相对于自己原来的位置！    position: relative;    // 绝对定位：相对于最近的非static定位(有定位的)祖先元素    position: absolute;    // 固定定位：相对于屏幕视口（viewport）的位置！    position: fixed;}

这个案例很好的解释绝对定位：相对于最近的非static定位(有定位的)祖先元素这里的关键是div2，div2没有设置任何定位，就是非static定位，那么div3就相当于div1(最近的有定位的祖先)来定位！.div1 {  width: 500px;  height: 300px;  background: red;  position: absolute;  top:50%;  left: 50%;  margin-left: -250px;  margin-top: -150px;}.div2 {  width: 100px;  height: 200px;  background: blue;  margin: 20px;}.div3 {  width: 200px;  height:100px;  background: green;  position: absolute;  top: 50%;  left: 50%;  margin-top: -50px;  margin-left: -100px;}

转载地址：http://zvmmz.baihongyu.com/