一相对定位（二）绝对定位 三position:fixed 固定定位 四position:static静态定位 五语法: 定位元素的层级顺序z-index 六实现盒子居中的方法 七定位与浮动的区别对比

（一）相对定位

偏移属性： 水平：  left  right           垂直： top  bottom

 特性：1.不影响元素本身的特性            2.不会使元素脱离正常文档流，也就是还占位

    3.如果没有定位偏移属性，对元素本身没有任何影响；如果有定位偏移属性，则相对于元素原来的位置发生偏移          4.提高层级

应用场景 ：1.微调自己的位置          2. 作为绝对定位的参照物

相对定位参照元素是自本身的位置

都加定位属性，结构在后的层级比结构在前的层级大

（二）绝对定位

position:absolute绝对定位

没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位

特性      1.元素脱离正常文档流，不占位(也脱离文本流，全脱)

        2.有定位父级相对于定位父级发生定位偏移

        3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html）

        4.能使不能设置宽高的行级元素设置宽高

        5.提升层级

        6.如果没有定位偏移属性，对元素本身有影响；如果有定位偏移属性，则相对于父元素发生偏移

应用场景：通常配合绝对定位使用（子绝父相）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等

 3、position:fixed 固定定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)

    2.始终相对于浏览器窗口四个角为原点进行固定定位的

    3.不会随页面的内容滚动而滚动

    4.能使不能设置宽高的行级元素设置宽高

    5.提升层级

    6.如果没有定位偏移属性，对元素本身有影响；

``应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏

 4、position:static静态定位

表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

 静态定位的元素不会受到 top, bottom, left, right影响。

# 定位元素的层级顺序

层级

    语法: z-index: n;  标签添加定位之后，可以覆盖在页面的其他标签上

    后面加载的定位元素默认会覆盖在先加载的定位元素上

    z-index属性：设置定位元素的叠放次序

       特性：

       1.z-index的属性值越大，它的层级就越高

       2.属性值可以取值为正数，0，负数，没有单位（整数）

       3.属性值取值相同的情况下，按照结构中的顺序排列次序，后来居上

       4.正值向上调整层级，负值向下调整层级

       注意：z-index属性要与定位一起使用才有效，否则无效

实现盒子居中的方法

方法一： 实现思路：margin负值配合百分比

margin 负间距原理

        使用margin属性的负间距实现具有width属性和height属性的绝对定位元素的居中

  position: absolute;

            left: 50%;

            /* 定位元素盒的宽度的一半 */

            top: 50%;

            /* 定位元素盒的高度的一半 */

            margin-left: -100px;

            /* -定位元素本身的宽度的一半 */

            margin-top: -100px;

            /* -定位元素本身的高度一半 */

```### 方法二： 实现思路：left,right,top,bottom并用，配合margin：auto;

如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。

使用margin：auto；实现具有width属性和height属性的绝对定位元素的居中

   position: absolute;

              left: 0;

              right: 0;

              top: 0;

              bottom: 0;

              marg=in: auto;

  ```- 注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置。

## 定位与浮动的区别对比

### 1、float: left|right;

 脱离了文档流，不脱离文本流，半脱离

### 2、position: absolute|fixed;

-脱离了文档流，脱离文本流，全脱离。

注意：所有的元素都能使用以上的属性，元素脱离正常文档流之后，不再区分块级和行级元素，宽度没有设置时，由内容撑开，行内元素可以设置宽高，类似于行内块元素。