CSS学习笔记——定位

1.元素的定位属性

边偏移属性：left、right、top、bottom
定位模式：position：static/relative/absolute/fixed
定位=边偏移+定位模式。

2.静态定位 position:static

静态定位是所有元素的默认定位，使用静态定位，偏移量无法改变元素的位置。静态定位的主要作用是用于消除定位。

3.相对定位 position:relative

使用相对定位可以使用偏移量改变元素的位置，但是原来所占的位置，继续占有，并且每次移动的位置是以自己左上角的基点移动。
注意：相对定位不脱离标准流，会占位置。

   div {
            background-color: purple;
            position: relative;
            left: 100px;
            top: 150px;
 }

4.绝对定位 position:absolute

可以通过偏移移动位置，而且是完全脱标，不占位置。
如果父级元素没有定位，那么子级元素的绝对定位以浏览器为准；
如果父级有定位，那么子级元素以最近已经定位的父级元素为准，父级的定位可以是relative或者absolute，称为子绝父相或者子绝父绝。
使用最多的是 子绝父相。

5.子绝父相

相对定位：占有位置 不脱标
绝对定位：不占有位置 脱标
在页面布局中，经常使用父级是相对定位 子级是绝对定位 例如：页面图片的轮播。

6.利用定位实现水平垂直居中

没有实现定位的盒子居中方法采用的是margin:上下间距 auto;采用定位后，不能够再使用margin方式居中。
水平居中：left:50%;父级元素的50%的位置，margin-left:-本身盒子宽度的一半(width/2);也就是自己再移动50%的距离
垂直居中：top:50%，margin-top:-height/2;

.father {
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative; /*父级元素相对定位，占有位置*/
        }
 .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute; /*子级元素绝对定位，不占有位置*/
           /* 水平居中 */
            left: 50%;
            margin-left: -100px;
          /*  垂直居中 */
            top:50%;
            margin-top: -100px;
        } 

7.固定定位 position:fixed

固定定位不占有位置，不随着滚动条移动而移动，与父级元素无关，只和浏览器有关，使用固定定位的元素一定要设置宽度和高度，除非有内容撑开。

8.叠加次序

多个元素同时设置定位时，定位元素会出现重叠现象
在CSS中药想调整定位元素的堆叠顺序，可以使用z-index属性取值：负整数/0/正整数 。

9.定位总结

    定位模式          是否脱标占有位置       是否可以使用边偏移    移动位置基准
    静态static           不脱标，正常模式         不可以              正常模式
    相对定位relative    不脱标，占有位置            可以         相对自身位置移动（自恋型）
    绝对定位absolute   完全脱标，不占有位置          可以         相对于定位父级移动位置（拼爹型）
    固定定位fixed      完全脱标，不占有位置          可以           相对于浏览器移动位置（认死理型）

10.定位模式转换

使用定位和使用浮动一样，元素会发生模式转换，使用绝对定位和固定定位之后，元素会转换为行内块元素，此时直接给高度和宽度即可，不需要进行模式转换。