2020-11-11

css定位属性共有三种：
相对定位 relative
绝对定位 absolute
固定定位 fixed

相对定位

相对与自己原来的位置定位，进行位置的调整。
margin与相对定位调整位置的区别：
1.盒子和盒子的距离，间隙。相对定位：位置的调整
2.margin会影响后面的元素。相对定位不会影响别人。
不脱标。坑位还占着，别人挤不走。 做绝对定位的参考，子绝父相。

固定定位

position:fixed用这个样式标签可以定位到固定的位置。
相对浏览器进行定位，无论页面如何滚动，这个盒子显示位置都是不变的。一般常用于网页返回顶部，侧边广告。顶部股东导航条。

绝对定位

找一个参考系，定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。横坐标用left，right 纵坐标用top和botto
绝对定位会脱标。
浏览器窗口高600px，页面已经卷了200px，现在有一个div：
wid：100
hei：100px
bc red;
post ab;
left:200px;
bottom:200px
*以盒子为参考点*：
  一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。
  1.以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。
  2.不一定是相对对位，任何定位信息，都可以做子容器的参考点。
  3.使用最多的子绝父相。
  4.以父容器的border内侧点为参考点，进行定位。
**应用：**
  1.压盖效果，一个div压在另一个div上面。
  2.绝对定位的盒子居中。  left:50%;margin-left: -自身宽度的一半。

z-index 属性
是定位元素专用的。 属性值是数字，数值大的会压盖住数值小的
1. z-index都没有值或值相同的时候，写在后面的盒子会盖住前面的盒子。
2.数值大的会盖住数值小的，z-index是一个自然数，默认为0.
3.从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。