CSS定位属性示例图

CSS的定位属性
CSS用来铺设页面的时候会经常用到各种的定位方法，笼统算下来css的定位机制呢，也是分为三种是:负责上下排列的布局的普通流；管理左右排列的布局的浮动流；定位层叠（叠加）排列的布局的定位流。三种布局机制中，需要的定位属性也就是本文章的主要了。
一、定位属性：position ：检索或设置对象的定位方式。
1、static：默认值；没有定位；（可以用于取消元素之前的定位设置）
2、 relative：相对定位 （参照物：自己所在的位置）
特点:如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流，空间是会被保留。
不影响其他元素布局left、top、right、bottom是相对于当前元素自身进行偏移的 ，不能独自存在，必须配合定位元素一起使用 。
下面即为相对定位的图示:

3、absolute : 绝对定位 （参照物：包含块—该元素的祖先级元素）
特点:使元素完全脱离文档流 使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。
下面即为绝对定位的图示:

4、固定定位： fixed （参照物：始终都是 相对于整个浏览器窗口进行固定定位的）
特点:使元素完全脱离文档流
内联元素支持宽高 （让内联具备内联块特性）
使块元素默认宽根据内容决定（让块具备内联块的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响不会受到祖先元素的影响。
下面即为固定定位的图示:

5、 黏性定位: sticky
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。
特点: 暂时文档流，页面滚动到指定位置时改变属性，变为固定定位。
下面即为黏性定位的图示:

以上就是当元素定位时所要使用到的一些定位属性了。
二、绝对定位当中的包含块也需要定位，我们一起再去了解下包含块的定义吧。
包含块绝对定位的基础：
绝对定位元素会根据包含块进行绝对定位，默认情况下 ，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。
怎么给他的祖先级元素定义成包含块： 给祖先级元素添加position：relative/absolute/fixed。

	        以上就是小亮在逆战班所学的一些关于元素定位属性的一些知识了。
	        学海无涯，各位加油