position（定位）

position（定位）介绍

通过position（定位）可以将元素摆放到页面的任意位置

可选值：


		static（无定位）				默认值，元素是静止的，没有开启定位
			
		relative（相对单位）			开启元素的相对定位
		
		absolute（绝对定位）			开启元素的绝对定位
		
		fixed（固定定位）			开启元素的固定定位
		
		sticky（粘滞定位）			开启元素的粘滞定位

---

relative（相对定位）

当元素的position的属性值设置为relative时，则开启了相对定位

相对定位的特点

特点：

1、元素开启相对定位后，如果不蛇者偏移量元素，元素不会发生任何变化


2、相对定位是参照于元素在文档流中的位置进行定位的


3、相对定位会提升元素的层级


4、`相对定位不会使元素脱离文档流`


5、相对定位不会改变元素的性质。块元素还是块元素，行内元素还是行内元素
											`（因为没有脱离文档流）`

------下面引出偏移量概念-------

偏移量（offset）

当元素开启了定位以后，可以通过偏移量来设置元素的位置

可选值：
			top				//定位元素和定位位置上边的距离
					
			bottom			//定位元素和定位位置下边的距离
			
			left			//定位元素和定位位置左边的距离
			
			right			//定位元素和定位位置右边的距离

---

absolute绝对定位

当元素的position属性值设置为absolute，则开启了元素的绝对定位

绝对定位的特点

特点：

1、开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化

2、开启绝对定位后，`元素会脱离文档流`

3、接上第二点则绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4、绝对定位会使元素提升一个层级

5、绝对定位元素是相对于其`包含块`进行定位

包含快（containing block）

正常情况下：

包含块就是离当前元素最近的祖先块元素

示例：

<div>
	<div>
	</div>
</div> 
//对于里面div的包含块是外面的的div


--------------------------------------------------------------------


<div> 
	<span>
		<em>hello</em>
	</span>
</div>

//对于span的包含块是div

//对于em的包含块也是div。
`因为span是个行内元素，它不算包含块，所以它不能作为包含块`



绝对定位的包含块：

	1、包含块就是离它最近的开启了定位的祖先元素

	2、如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
	
	3、html（根元素、初始包含快）

---

固定定位（特殊的绝对定位）

1、将元素的position属性设置为fixed，则开启了元素的固定定位

2、固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样

与绝对定位不同的是：

	
	固定定位永远参照与浏览器的视口进行定位
					
					
	固定定位的元素不会随网页的滚动条滚动
						`常见的如澳门赌场的广告`			

---

粘滞定位

1、当元素的position属性设置为sticky时，则开启了元素的粘滞定位

2、粘滞定位和相对定位的特点基本一致

与相对定位不同的是：

	粘滞定位可以在元素到达某个位置时将其固定
	
	
示例：
	position:sticky;
	top:0;

注：

缺点是兼容性不好，很少会去用。真正要做这个效果可以用js来完成