css-定位

一、定位流
1、分类：
1.1、相对定位:相对于自己以前在标准流中的位置来移动，需要与top、bottom、left、right来使用
注意点：相对定位是不脱离标准流的，会继续在标准流中占一份空间,不利于布局界面；同一个方向上只能有一个定位属性，如只能left，不能left和right都设置；由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素、行内块级元素、行内元素的；由于相对定位的元素会占标准流中的位置，所以当给相对定位的元素设置margin 、padding等属性时会影响到标准流的布局，margin 、padding设置给了定位之前的元素，而不是定位后的元素
应用场景：用于对元素进行微调；配合绝对定位来使用

     .box2{
            background-color: blue;
            position: relative;
            top: 20px;
            /*bottom: 20px;*/
            left: 20px;
            /*margin-bottom: 20px;*/
            margin-top: 20px;

        }

1.2、绝对定位:相对于body来定位
注意点:绝对定位的元素是脱离标准流的，不区分行内、块级、行内块级元素.
1、如果一个绝对定位的元素是以body作为参考点，其实是以网页首屏的宽高作为参考点，而不是整个网页的宽高。例如网页的宽高超过了屏幕的宽高，那么滑动网页该绝对定位元素也会一起相对滑动
2、一个绝对定位的元素会忽略祖先元素的padding

     .box2{
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
        }

绝对定位参考点规律：
a、默认情况下，所有绝对定位元素，无论有没有祖先元素都会以body作为参考点
b、如果一个绝对定位的元素，且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先作为参考点；只要是这个绝对定位元素的祖先元素都可以作为参考点；该处的定位指的是绝对定位、相对定位和固定定位；定位流中只有静态定位不行
c、如果一个绝对定位的元素，祖先元素也是定位流，且祖先元素中有多个元素都是定位流，那么这个绝对定位元素会以离它最近的那个定位流的祖先元素作为参考点

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

一般绝对定位和相对定位一起使用：子绝父相

如何让绝对定位的元素水平居中：只需要设置绝对定位元素的left：50%，然后再设置绝对定位元素的margin-left：-元素宽度的一半。例：

div{
           width: 500px;
           /*width: 50%;!*宽度是浏览器的一半*!*/
           height: 50px;
           background-color: red;
           position: absolute;

           left: 50%;/*与浏览器左边的距离是浏览器宽度的一半*/
           margin-left: -250px;/*与浏览器左边的距离是浏览器宽度的一半*/
       }

1.3、固定定位
1.3.1、固定定位的元素是脱离标准流的，不会占用标准流中的空间
1.3.2、不区分行内、块级、行内块级元素
1.3.3、图片关联属性使图片不会随着滚动条滚动而滚动background-attachment:scroll;，固定定位的元素也不会随着滚动条的滚动而滚动 position: fixed;

1.4、静态定位

2、z-index属性
2.1、默认情况下所有的元素都有一个默认的z-index属性，取值是0

2.2、z-index属性是专门用于控制定位流元素覆盖关系的
2.2.1、默认情况下定位流的元素会盖住标准流的元素
2.2.2、默认情况下定位流的元素后面编写的会盖住前面编写的
2.2.2、如果定位流的元素设置了z-index属性，那么谁的z-index属性值越大，谁就显示在上面

2.3、注意点
2.3.1、如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性值越大，谁就显示在上面
2.3.2、如果两个元素的父元素设置了z-index属性，那么元素的的z-index属性就会失效，也就是说谁的父元素z-index属性值比较大，谁就显示在上面