一 概述
position 属性有五个位置值: static relative fixed absolute sticky
position 定位都是需要通过 top、bottom、left 和 right 属性来定位的,但首先要设置position属性,不同的position属性会产生不同的效果
position:static
设置静态position属性的元素不会以任何特殊方式定位,会随着正常页面流来进行定位,不会受 top left right bottom 属性的影响
position:relative
使该元素相对于其正常的位置来定位;
未设置relative相对定位时,其居于最左最上方
启用后,相对之前的位置发生偏移
position:absolute
使该元素对象鱼最近的被定位祖先元素进行定位
如果该绝对定位元素没有祖先,它将使用文档主体(body)进行定位,此时相当于relative的定位
relative absolute 结合问题
a 相当定位, a的子元素b 为 absolute绝对定位
此时 b还有一个子元素c 也是绝对定位,此时元素c还是相对于a定位的
position:fiexd
使元素相对于窗口定位,不随着页面滚动变化位置,而是始终位于同一位置,产生悬浮效果
position: sticky
当该元素在视窗内可见时,会处于正常流布局状态
滚动页面 当达到相对视窗设置的 left等属性的距离时,开始固定该位置 设置 top = 0 可产生吸顶效果
当开始滚动,会固定在离顶端20px的位置(top:20px)吸顶效果
z-index
设置元素堆叠顺序 -1为底层