原来我一直理解错了css的position

来源：互联网发布：sql的添加语句序列编辑：程序博客网时间：2024/04/29 10:15

对position错误的理解

每次做层浮动效果时，我都将position设置为absolute, 再通过js来计算left,top来给元素来定位。也许是之前做的页面非常简单，整个页面里面没有嵌套设置position的情况，故一直都认为当position：absolute时，是相对于document.body来偏移的，其实并不是这样的，我们先看下position的属性。

position的属性

static

relative

absolute

fixed

对每个属性的理解

static: 这是默认值，即按照正常的文档流的顺序来放元素。这个时候你设置left,top是没有效果的。

relative: 位置会以元素本身的位置进行偏移，即你设置了left,top ,他会以此元素原来的位置做为坐标偏移。

absolute: 位置会从父元素开始查找，如果父元素的position不是 static的,那么他就以这个父元素的位置进行偏移，否则就会一直向上查找，直至查找到body,就以body的位置偏移，所以以前理解absolute是以body为位置偏移是错的，那是因为你处理的元素的父元素的position都是默认static的, 但当你的父元素是非static的，算位置时就出现不一样的效果。

fixed: 这个才是以document.body的位置偏移的，无论你要设置的元素的父元素或往上的元素的position是absolute,relative,fixed，他都是以document.body的位置偏移的。

这样理解后，就消除了以前的一些疑惑。但在定位方面，我们可以试一下更复杂的情况。

可以进一步理解

在实际position定位时会遇到很多种情况，比如父元素设置了margin,padding,border. 那么定位原则是怎样的呢？

1. 当元素的position:relative时，位置偏移时是从此元素自身的margin的最左上侧开始算的。

2. 当元素的position:absolute时这里也分两种情况：

（1）无论它的父元素是怎样的，如果它自身有margin ,那么他的位置偏移也是要算上它自身的margin的。

（2）如果它的父元素不是默认的static ,而它父元素有border 和 padding, margin.

则它的位置偏移要算上父元素的margin和border,当时不会算上padding.

可能上面说的比较有点乱，不太好理解，在这里上个例子，大家也可以改这个例子来看看效果，例子仅仅只是测试位置，命名和文字请不要太在意。

<!DOCTYPE><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>  div {    border:1px solid red;      }  .ap {      position:relative;    border:30px solid red;    margin:200px;    padding:20px;    left:20px;    top:20px;    width:400px;    height:400px;  }  .a {    border:1px solid blue;    position:absolute;    margin:100px;    left:0px;    top:0px;  }  </style> </head> <body> <div> fdsfdsds <div>    qq    <div class="ap">    fffdfdfd<br>        <div class="a">kkkk</div>    </div> </div> </div>  <script>  </script> </body></html>

总结

现在终于基本上对position的定位有一定的了解了，也希望可以帮助到大家，如果有什么问题请给我留言，大家一起进步。另外，对于position还会结合到通过js操作dom元素的

offsetWidth,offsetLeft, offsetParent等等属性，下一期我会继续讨论这方面的问题，希望大家一起将这些吃透。

注：

fixed是相对浏览器窗口的定位，而不是body

子div设置position:absolute 父div如果是默认定位，子div的参照不是这个父div了，而是body.

如果父div是默认定位，它还会继续查找父div的父有没有非默认定位，直至找到body.