定位流分类：
一、相对定位：{position: relative;}
相对自己在以前标准流中的位置上右下左移动。要配合 (垂直方向top/bottom) / (水平方向left/right) 任何一组或二组使用才有效果。
/* 相对之前的位置上右下左移动 */
.box2 {background-color: blue; position: relative; top: 10px; left: 40px;}
注意：
-相对定位不脱离标准流，会继续在标准流中占用一份空间，
所以不利于布书界面。当给相对定位设置 margin/padding属性时，是对于定位之前的元素的margin/padding的设置，不是定位之后的。
-垂直方向top/bottom 只能写一个
-水平方向left/right 只能写一个
-由于相对定位是不脱离标准流的，所以相对定位区分 块级元素、行内元素和行内块级元素(不可设置宽高)。
- 应用场景：对元素进行微调，配合绝对定位来使用
二、绝对定位：{position: absolute;}
-
绝对定位是相对于 body 来进行定位的，定位到 body 的上下左右四个地方
.box02 {background-color: yellow; position: absolute; bottom: 0; right: 0;} /* 定位到 body 的右下角*/ -
绝对定位的元素是脱离标准流的
-
绝对定位不区分 块级元素、行内元素和行内块级元素(可设置宽高)。
-
绝对定位的参考点：
1、默认情况下，无论有没有祖先元素，所有绝对定位的元素都 会以 body 作为参考点。
2、如果一个元素有祖先元素A - B - aaabbbccc，
A是定位流B不是，子孙元素始终在A内部，A到哪它们到哪
A不是B是定位流，子孙元素始终在B内部，B到哪它们到哪
后面的子孙元素会以祖先元素的定位流作为参考点。
A和B都 是定位流，子孙元素以离他们最近的B定位流作为参考点进行定位。 -
绝对定位的注意点
1、如果一个绝对定位元素以 body 作为参考点，其实是以网页的首屏作为参考点，不是以整个网页的宽度和高度作为参考点。
2、绝对定位流的元素会忽略祖先元素的padding属性。 -
子绝父相：子元素用绝对定位，父亲元素用相对定位
/* 找到ul中的第4 个li /
ul li:nth-of-type(4) {background-color: orange; position: relative;} / 父相对 /
ul li img {position: absolute; left: 39px; top: -8px;} / 子绝对,数字是通过开发者模式调整出来的 */
- 绝对定位元素img的水平居中方式：
img {position: absolute; left: 50%; margin-left: -(负号)图片宽度的一半px;}
三、固定定位：position:fixed
固定定位是脱离标准流的，是不占用标准流的空间的。
固定定位和绝对定位一样，不区分行内、块级、行内块级元素。
固定定位和前面的关联方式很像
背景定位可以让背景图片不随着滚动条而滚动
而固定定位可以让某个盒子不随着滚动条的滚动而滚动
四、静态定位
z-index属性：默认情况下所有的元素都 有一个默认的z-index属性，取值是0
z-index属性的作用是专门用来控制定位流元素的覆盖关系的
1、默认情况下，定位流的元素会盖住标准流的元素。
2、默认情况下，后面的定位流会盖住前面的定位流元素。如果想要前面定位流的元素不被后面定位流的元素盖住，可以把前面定位流的元素的 z-index 改大于前面的元素就行了，如 z-index:1 ;
3、从父现象：
- 如果两个子元素的父元素都没有设置 z-index，那么谁的 z-index 大，谁就显示在最上面
- 如果两个元素的父亲元素都设置了 z-index，那么子元素的 z-index 就会失效，谁的父元素的 z-index 大，认就显示在最上面。
网友评论