学什么之前端CSS定位，本文全文阅读大约3分钟
相对定位-
position: relative;- 没有脱离文档流
- 参照物是元素本身位置
- 当
top和bottom同时有值的情况下，top值生效，支持负值 - 当
left和right同时有值的情况下，left值生效，支持负值 - 任何元素都可以设置相对定位属性
- 相对定位元素位移发生改变，但元素原来的位置还会被占用，其他元素还是正常识别这个元素原来的位置
绝对定位-
position: absolute;- 脱离文档流
- 可以设置参照物，参照物必须是其父级元素（直系父级），如果没有直接父级会一直往上查找直到找到最外层的根元素为止；
- 有宽度和高度的情况下，
top和bottom同时有值，top生效；left和right同时有值，left生效。 - 没有宽度和高度的情况下，
top和bottom同时设置值的情况下，会将这个盒子拉大，上下值都起作用，左右同理。 - 可以设置层级关系
z-index属性，必须要和定位元素（绝对，相对，固定）同时使用，才会起作用。 - 一个元素定位在另一个元素上或者两个元素叠加的情况，都可以使用定位（绝对定位）
- 绝对定位一定要设置相对参照物
固定定位-
position: fixed;- 脱离文档流
- 参照物是浏览器的可视窗口
- 任何元素都可以设置固定定位
- 可设置
top/bottom/left/right四个方位 - 可通过
z-index改变层级
z-index属性的特点- 默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
- 可以使用
z-index属性修改定位元素的层级关系 - 所有定位元素的
z-index默认值都一样 z-index值是数字没有单位，支持负数- 一般都是同级元素进行层级的比较
- 当参照物是相对定位或绝对定位的时候，父级元素之间没有
z-index值，子元素的z-index值进行比较