一，定位概念

key：position；

作用：设置定位的元素，它需要根据某个参考元素发生的位置

偏移量属性：水平方向：left、right；垂直方向：top、bottom； value：px、百分比；

1，相对定位

relative以自己原有的位置去移动，且形影分离，不会让出原来的位置；

值得注意的是top和left也可以给负数等价于bottom和right；

当给a hover时可以用相对定位把a的border-top用定位移上去；

元素是底部对齐的方式，可以利用定位写上标；

position: absolute; 绝对定位元素会脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开

祖先级有定位参考元素为祖先级元素，也就是子盒子设置position: absolute;父盒子有定位元素就以父盒子为定位参考，反正就是以最近的祖先级盒子为参考元素；

距离子元素目标最近的祖先元素有任意定位的父级元素就是他的参考元素子绝父相，子绝父绝，，子绝父固，绝对定位固定定位是会脱标的，所以一般用的是子绝父相的方式

如果以body为参考元素，top参与定位那么就是以浏览器左上角或右上角为参考点，bottom参与定位那么就是以首屏浏览器左下角和右下角为参考方式；

position；fixed;

参考元素：浏览器窗口；

参考点：浏览器四个窗口，跟偏移量组合top、bottom、left、right方向有关；由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素始终显示在定位的位置

所有的定位类型都可以实现压盖效果；定位元素压盖标准流元素和浮动定位；

如果都是定位元素则按照html的书写顺序后写的压盖先写的；

由于绝对定位的元素脱标，不占标准流的位置，压盖效果更彻底，实际工作中常见的是绝对定位制作的压盖

key：z-index value：数字数值越大就可以压盖小的，这一属性只有设置了定位元素才能起作用；两对父子级盒子，父盒子设置了z-index值大的压盖值大的，就连父盒子z-index大的子盒子都会压盖父盒子值小的子盒子；也就是从父效应；

先给父子盒子父相子绝的定位，然后子盒子top、left为50%；然后给子盒子设置margin-top、left给负值，负值为子盒子宽度的一半；

可以给导航条盒子这样设置，导航条就会吸在上方，不会随着页面的滚动而滚动；

position: sticky;`
 top：0；