定位层(position, z-index)

定位层(脱离了普通文档流)   1.定位层是由html元素(标签)形成的一个特殊的box盒子;     其重点在由"定位",而html元素(标签)的定位由css来控制，     通常情况下，html元素(标签)默认的定位方式叫作"静态定位"，     存在于普通文档流中，而定位层是指的那些修改了定位方式的box,     即非静态定位的box;   2.定位层的"定位"需要根据参照对象来实现定位的位置;   3.定位层的主要作用是用来实现小范围内容元素的排版和定位;

定位属性position  作用:规定html元素的定位类型; 值 说明 参照物 static (默认值)静态定位 无定位，html元素出现在默认文档流中，是默认的定位方式; absolute  绝对定位 相对于非static定位的第一个父元素进行定位; relative 相对定位  相对自身在默认文档流中的正常位置进行定位; fixed  绝对定位 相对于浏览器进行定位（即使窗口是滚动的也不会移动）

原理:脱离页面文档流，独立于立体面的z轴之上，       从立体z轴的角度看，定位层在浮动元素之上;

相关属性     当html元素（标签）被设置位定位层（非static）之后，可以激活定位相关属性的设置; 值 说明 top  规定定位元素的上边界于参照物直接的距离偏移; right  规定定位元素的右边界于参照物直接的距离偏移; botom  规定定位元素的下边界于参照物直接的距离偏移; left 规定定位元素的左边界于参照物直接的距离偏移; 这4个定位属性均可设置位负值，同方向右冲突时以top，left优先;

z-index:属性    当元素(标签)被设置位定位层(非静态)之后，可以激活定位相关属性设置;    z-index:规定定位元素的堆叠顺序，拥有更高顺序的元素总是会处于较低顺序的元素的前面;       z-index的值是指定顺序关系，因此，是number形式，没有单位;    z-index的值允许为负数，当值为负数时，定位层处于普通文档流之下，会被覆盖;

定位层：绝对定位+相对定位    1.特点      完全脱离默认文档流，独立于立体层面的z轴之上;     和float一样都脱离了默认的文档流，但float元素之间默认的文档流之间会互相影响，而定位层元素则完全独立，互不干扰;  2.让元素inline-block化    例如一个div标签默认的宽度是100%显示的 ，但是一旦变为absolute绝对定位，则默认独占一行的宽度会变为自适应内部元素的宽度;    通常当我们将html元素设置成为定位层之后，就需要指定其宽度和高度;