html+css---position(定位)

position定位

**定位**:更高级的布局手段，所有元素都可以使用定位

            通过浮动，外边距等都不能实现位置效果的时候，就使用定位

**取值**：

## static 默认值，没有设置定位

## relative：相对定位

                 偏移时参考位置：元素本身的初始位置

                 特点：

                   1.**不脱离**标准文档流

                   2.初始位置继续占用

                   3.会覆盖标准文档流里面的文本内容

## absolute：绝对定位

                 偏移时参考位置：离他最近的开启定位的祖先元素，如果没有祖先元素开启定位，参考变为body

                 特点：

                   1.margin：0 auto，水平居中和浮动没有效果

                   2.设置绝对定位的元素**脱离**标准文档流  

                   3.原来位置不会继续占用，后面标准文档流中的兄弟元素上移

                   4.会覆盖标准文档流里面的文本内容

                    一般作为绝对定位的参考是是将祖先元素设置为相对定位

## fixed：固定定位，就是特殊的绝对定位

                     偏移时参考位置：浏览器视口

                     特点：

                    1.设置绝对定位的元素**脱离**标准文档流

                     3.原来位置不会继续占用，后面标准文档流中的兄弟元素上移

**定位元素**：position值非默认值static

        **定位元素的偏移**：left 、right、top、bottom

## sticky: 粘性定位

                可以做**吸顶效果**

           参考位置：离父元素的距离，如果离父元素的距离与设置一致，就固定不动

           特点：不脱离标准文档流，原先位置继续占有

# auto值的设置

    **水平方向**：

left+margin-left+brder-left+padding-left+width+padding-right+border-right+margin-left+right=包含块内容宽度

        margin-right

        margin-left

        width

        left        right    top    bottom

**1**.都是确定的数值时，和小于包含块的内容盒宽度，多余部分就被right吸收

**2**.只设置一个auto值:多余位置被设置auto的属性吸收

**3**.设置二个auto值:

        3.1 margin-left margin-right 水平居中

        3.2 manginleft/margin-right和left/right同时设置时，多余部分给left/right吸收

        3.3 width和left/right同时设置auto时，多余部分给left/right吸收        3.4 left和right同时设置auto时，多余部分给right吸收**4**．设置三个值:        4.1有left/right，多余部分就给left/right吸收

        4.2同时有left和right时，多余部分给right**5**．设置四个值:        5.1 有left/right，多余部分就给left/right吸收

    **垂直方向**：

top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块内容盒的高度

  **同水平方向**

## z-index 定位的层级

    z-index:50;

父子关系：想父元素在上面，就在子元素层级为**负值**