为什么写这篇文章那,主要是最近工作中遇到了要做 吸顶 功能,而且又想到了之前
面试
滴滴,面试官问我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