CSS(二) position属性

一 概述

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为底层