CSS定位属性？

CSS定位属性？
CSS 文档流
CSS 有三种基本的定位机制： 普通流、浮动 流、定位流。

POSTION
position定位属性，检索或设置对象的定位方式
position 属性值static 默认值 。
位置设 置为 static 的元素会正常显 示，它始终 会处 于文档流absolute相 相对 于父级 元素、的绝对 定位，浮出、脱离布局流，它不占据空间 ，就是我们 所说 的层 ，其位置相“bottom” 属性。若父级 都没有定位，则 以html （根元素）。(层 叠的顺 序z-index:value)relative 是相对 于默认 位置的相对 定位，通过设 置left 、top 、right 、bottom值 可将其移至相对 于其正常位置的地方（相fixed相对浏览 器的绝对 定位，是相对 于浏览 器窗口的指定坐标进行定位此元素的位置可通过 "left"sticky 可以看出是 position:relative 和 position:fixed 的 的结 合体—— 当元素在屏幕内，表现为relative

图中显示的定位：

二、绝对定位和相对定位的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

包含块
包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

定位元素层 次关系
z-index : auto |number
检索或设置对象的层叠顺序。
auto：默认值。
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
定位案例：