position六个属性

为什么写这篇文章那，主要是最近工作中遇到了要做 吸顶 功能，而且又想到了之前 面试滴滴，面试官问我position属性我都知道什么，我只说上来了“绝对定位、相对定位、固定定位”，其实面试官真的是疯狂提示我，一直说你还有了解别的吗？无奈啊，当时并不知道 粘性布局啊，总之今天要记下来。

1. static定位

这个没啥好说的，static就是position的默认属性，他是遵循正常的文档流的，会忽略设置的top,right,bottom,left,z-index值。

我之前用来控制 将设置了position的其他属性变回正常的文档流

2. fixed定位

fixed是position的固定属性，他会脱离正常的文档流，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动,fixed元素总是相对于body定位的,与父元素无关。

我是用来做窗口弹出来的广告，或者是移动端头部固定导航。

3. relative定位

relative是position的固定属性,它遵循正常的文档流，所以周围元素不会忽略它的存在，relative 支持 top,bottom,left,right等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于,relative 元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略 relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动.

我是用来写在父元素上让子元素可以相对定位，用来占位置等。

4. absolute定位

absolute是position的绝对定位属性, 它将会脱离正常的文档流，所以 其周围的元素将会忽略它的存在,可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或着 bottom,left 或 right,设置这些属性后将会往上查找absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

一般在布局混乱的时候使用。

5. sticky定位

sticky是position的粘性定位属性,该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。粘性定位的元素是依赖于用户的滚动，在 position:relative与 position:fixed 定位之间切换。首先就像是 position:relative;，当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。须指定 top, right, bottom 或 left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

这个就是在元素吸顶，比如说一些套餐里面向上滚动后一些元素就会固定在头部位置。

6. inherit定位

inherit是position的继承属性,继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

这个就是在元素目前我没有在项目中遇到过

主要是记录了一下position的属性，希望以后再看这篇文章的时候可以复习一下,大家看到这篇文章可以辩证地看待一下

个人感觉这篇文章介绍的就很好：https://www.cnblogs.com/moqiutao/p/4781830.html