position定位属性，检索或设置对象的定位方式

position

static  默认值

位置设置为static的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何top、buttom、left、right声明）

absolute

相对于父级元素的绝对定位，浮出。脱离布局流，它不占据空间，就是我们说的层，其位置相对于最近的已定位父元素而言的位置

可直接指定left、top、right、buttom属性。若父元素没有定位，则以html（根元素）。(层叠顺序z-index:value)

relative

是相对于默认位置的偏移定位，通过设置left、right、top、buttom值可将其移至相对于其正常位置的地方（相对于自己开始的位置发生的位置上的移动，（不会破坏正常的布局流）

fixed

相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位，此元素的位置可通过left、right、top、buttom属性来规定，不论窗口滚动与否。元素都会留在那个位置。

absolute和relative的区别

       参照物不同

       会不会破快布局流，占不占空间

        absolute破坏布局流

包含块（绝对定位参照物）：

        给要做决定定位的元素的父元素设置相对定位position：relative；，这样父元素就形成了一个包含块。

包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的便宜起点和百分比商都的参考；

默认情况下，html就是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的

如果我们定义了包含元素为包含快以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置

z-index

auto | number

检索或设置对象的堆叠顺序。

auto   默认值

number  无单位的整数，可谓负数

没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

功能：控制定位元素的层叠顺序。一般此属性出现在有定位的情况下。

号外：

元素的margin属性在元素的外面，不占用width

元素的padding属性在元素的里面，占用width