css——定位1

1. 定位

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

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

2. 取值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

• 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失效