**定位**

含义：让元素去某个位置，或者相对于某一个元素进行位置的改变

属性：position：；

取值：

1、static；静态定位（默认）元素正常显示，位置不变

（该怎么显示就怎么显示，即使配合位移属性，元素位置也不会发生变化）

2、relative；相对定位，相对于自己的默认位置进行位置的改变（让元素位置发生微调，不会影响到其他元素）

3、absolute；绝对定位

父子关系中

a、子元素添加绝对定位，父元素没有定位，子元素参照浏览器窗口左上角进行位置的改变（位置的偏移）

b、子元素添加绝对定位，父元素有定位（通常使用相对定位，父相子绝），子元素参照其已定位的父元素左上角进行位置的改变（位置的偏移）

绝对定位元素会找到最近的定位元素（除了静态定位）

4、fixed；固定定位，元素相对于浏览器窗口进行定位（位置的改变），只显示在窗口范围内，不受滚动条的影响。

应用场景：返回顶部、广告、楼梯层效果

5、sticky；粘性定位

应用场景：常用来实现吸顶效果

位移属性：

top/right/bottom/left(水平方向只取一个值，垂直方向同理)

正值向元素中心移动，负值向元素四周扩散

定位元素的层级属性

z-index : auto/number 设置定位对象的层叠顺序。

auto：默认值。效果等同于0。

number:无单位的整数值。可为负数，数值越大，层级顺序越高

定位带来的影响

1、相对定位带来的影响：

          a、元素添加相对定位不会脱离文档流，占据默认位置的空间

          b、多个元素同时相对定位，默认后面定位元素会覆盖前面的定位元素，想要调整层级关系，需要使用层级属性z-index

2、绝对定位带来的影响：

          a、元素添加绝对定位脱离文档流，不占位置，后面不定位元素会自动补位。

          b、多个元素同时绝对定位，默认后面定位元素会覆盖前面的定位元素，想要调整层级关系，需要使用层级属性z-index

浮动与绝对定位

不同点：

    浮动：

         浮动元素半脱离文档流，后面补位元素有文本内容，会实现文本环绕效果

    绝对定位：

         绝对定位元素完全脱离文档流，后面补位元素有文本内容，不会实现文本环绕效果。

相同点：

        1、如果后面补位元素中没有文本内容实现效果相同

        2、都能触发BFC机制，形成独立的区域（解决子元素margin-top作用在父元素上）。

        3、都能将元素转换成块元素

        4、添加margin：0  auto；不生效，因为脱离了文档流

        5、给宽度自适应元素添加浮动或绝对定位，元素宽度变为由内容撑开的宽度自适应。

元素在浏览器窗口水平垂直居中

方法一：

position：fixed；/position：absolute；

top：50%；

left：50%；

margin-top：元素高度一半的负值

margin-left：元素宽度一半的负值

方法二：

position：fixed；/position：absolute；

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

元素在容器中水平垂直居中

方法一：

容器添加position：relative；

top：50%；

left：50%；

margin-top：元素高度一半的负值

margin-left：元素宽度一半的负值

方法二：

容器添加position：relative；

position：absolute；

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;