CSS的定位属性

说到CSS的定位属性，首先谈一下CSS的三种定位机制。

CSS 有三种基本的定位机制：普通流、浮动流、定位流

今天介绍的是第三种定位流，他的定位属性position有以下几种情况
1.static：默认值；没有定位；
2.relative：相对定位 （参照物：自己所在的位置）
特点： 如果没有定位偏移量，对元素本身没有任何影响，不使元素脱离文档流，空间会被保留，不影响其他元素布局。left、top、right、bottom是相对于当前元素自身进行偏移的 ，不能独自存在，必须配合定位元素一起使用 。
3. absolute : 绝对定位 （参照物：包含块―该元素的祖先级元素）
使元素完全脱离文档流使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
4. 固定定位： fixed （参照物：始终都是 相对于整个浏览器窗口进行固定定位的）
使元素完全脱离文档流使内联元素支持宽高 （让内联具备内联块特性）
使块元素默认宽根据内容决定（让块具备内联块的特性）
对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响也不会受到祖先元素的影响。
5. 黏性定位: sticky 在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。

绝对定位和相对定位的区别：
1、相对定位的参照物是自己本身所在的位置，绝对定位的参照物的是包含块
2、相对定位是不会脱离文档流的，而且不会对页面的布局产生影响；绝对定位是会脱离文档流的，原来的位置就不在占有的，后面的内容会把位置补上去。
定位元素层次关系
z-index : auto |number
检索或设置对象的层叠顺序。
auto：默认值。number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上。
注：他只针对于具有定位属性的元素起作用；
包含块
包含块绝对定位的基础；绝对定位元素会根据包含块进行绝对定位，默认情况下 ，浏览器的可视窗口是一个大的包含块，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。
总结：相对来说，学习了定位元素之后，网页上的一些功能就可以通过定位属性来进行实现。需要多练习加以强化。