关于定位position
relative 相对定位，相对于其源文档流的位置进行定位 不脱离文档流
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位、 脱离文档流
fixed 固定定位，相对于浏览器的窗口进行定位 脱离文档流
position:
取值：static 默认，静态（默认文档流定位）
relative 相对定位
absolute 绝对定位
fixed 固定定位
当一个元素被position修饰，并且取值为
relative/absolute/fixed其中一种时，
那么这个元素被称为已定位元素
定位要配合偏移属性使用
当一个元素有position属性，并取值为relative/absolute/fixed
那么这个元素就解锁4个偏移属性，元素距离(方向)有多少px
top: +往下 -往上
right: +往左 -往右
bottom: +往上 -往下
left:+往右 -往左
相对谁定位，相对自己原来位置偏移某个距离
position:relative;配合4个偏移属性使用
特点：1.不脱离文档流
2.相对定位，如果不写偏移量，效果与没写定位是一样的。不影响任何布局(为了绝对定位做准备)
使用场合：
1.自身元素位置的微调
2.作为绝对定位子元素的已定位祖先级元素
2.绝对定位
|
position:absolute；配合偏移属性应用 特点：1.绝对定位的元素会相对于，离自己"最近的""已定位的""祖先元素"，去实现位置的初始化 如果没有已定位的祖先元素，相对于body去实现位置的初始化 2.绝对定位，是脱离文档流的，不占据页面空间，后面元素会上前补位。 3.绝对定位的元素，会变成块级元素 |
3.固定定位
|
position:fixed；配合偏移量使用 将元素固定在页面上的某个位置，不会随着滚动条发生位置变化，一致固定在可视区域 特点：脱离文档流，位置相对于body初始化 元素不占页面空间 后续元素上前补位 元素变为块级 |
4.堆叠顺序
|
1.定位的脱离文档流和浮动的脱离文档流不是一个体系 2.默认，后定位的元素，堆叠顺序高 3.设置堆叠顺序 z-index:无单位数字 4.堆叠顺序对父子级无效，儿子永远在父亲的上面 5.只有已定位元素，有堆叠顺序 |