定位流、z-index属性

相对定位

相对定位就是相对于自己以前在标准流中的位置来移动` position: relative;`

相对定位注意点
1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
2在相对定位中同一个方向上的定位属性只能使用一个
3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

---

绝对定位

相对于body来定位` position: absolute;`

绝对定位注意点

1绝对定位的元素是脱离标准流的
2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

规律

默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以最近的定位流的那个祖先元素作为参考点
1只要是这个绝对定位元素的祖先元素都可以
2指的定位流是指绝对定位/相对定位/固定定位
3定位流中只有静态定位不行

如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

一个绝对定位的元素会忽略祖先元素的padding

如何让绝对定位的元素水平居中

只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

  div{
            width: 300px;
            /*width: 50%;*/
            height: 50px;
            background-color: red;
            /*margin: 0 auto;*/
            position: absolute;
            left: 50%;
            margin-left: -150px;
        }

---

子绝父相

相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

子绝父相
子元素用绝对定位, 父元素用相对定位

---

固定定位

 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

position: fixed;

相对于浏览器窗口来对元素进行定位
注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级

---

z-index属性

默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1.默认情况下定位流的元素会盖住标准流的元素
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点:
1.从父现象：

1. 如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
2. 如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面

---

注意

脱离标准流：绝对定位、固定定位