定位

1. 什么是定位

定位postion属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置。

2. 取值

• relative

  相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。

  （定位元素才有的方位属性： top | bottom | left | right，值一般使用px单位或%值。）

  • 特点

  不会脱离文档流

  不影响元素本身的任何特性

  如果不加方位词偏移那么没有任何影响

• absolute

  绝对定位能让元素脱离文档流（原地起飞…），使用方位属性相对于最近的有定位的父级元素进行偏移；

  注意！方位属性初始值不是0，而是auto。

  方位属性left和top 优先级比 right和bottom高，比如一个元素既拥有left也拥有right，最终位置以left为准。

  • 特点

  脱离文档流

  元素宽高默认值为0

  找不到最近的定位父级则相对于body标签

  一般配合相对定位使用（参照物）

  会将元素转换成块元素

  设置了绝对定位,没有设置层级;html后写居上

  margin:auto 暂时失效

• fixed

  固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移；

  • 特点

  脱离文档流

  元素宽高默认值为0

  margin:auto失效

3. 层级

定位元素之间，如果出现覆盖问题，那么越到后面的元素优先级越高，当然我们可以使用z-index层级属性来调整优先级。

z-index属性只针对定位元素有效

取值为一个整数数字，默认auto 或 0 ，可正可负

4. 盒子居中

使用定位让元素在父级中居中的方式：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

或者：

position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;

5. 补充

伪类选择器 :hover

<style>
  div{width: 100px; height: 100px; background-color: red}
  /*当鼠标移入div时，背景颜色变为blue*/
  div:hover{background-color: blue}
</style>
<div></div>