css文档流

css文档流: 普通流: 元素默认从上至下,从左至右的排列顺序 浮动流: 添加了浮动后的排列顺序,脱离文档流(普通流) 定位流: 添加了定位后的排列顺序,脱离文档流(普通流)

定位: 改变元素的位置(禁止在搭建页面结构过程中大面积使用定位)
	position:定位;
		坐标轴:
			水平: left right
			垂直: top bottom
		定位值:
			默认定位:static
				【注】默认值，无法改变坐标属性

			绝对定位:absolute
				脱离文档流
				能改变坐标属性,可以为负数
				默认参考根元素(html),或者参考最近的有定位的父元素(默认定位除外)

			相对定位:relative
				占据文档流
				能改变坐标属性,可以为负数
				默认参考自身加载到浏览器中的初始位置
				

			固定定位: fixed
				脱离文档流
				能改变坐标属性,可以为负数
				参考浏览器窗口改变自己的位置
				在页面中固定不动

			粘性定位: sticky
				占据文档流
				能改变坐标属性,可以为负数
				参考浏览器窗口改变自己的位置
				在页面中固定不动
				结合了相对定位和固定定位的特征

		绝对定位 和 相对定位的区别
			1: 参考物不同
				前者参考根元素或最近的有定位的父元素
				后者参考自身加载到页面中初始位置

			2: 是否占据文档流
				前者脱离文档流
				后者占据文档流

		包含块:
			1: 嵌套结构
			2: 父元素设置position:relative; 子元素设置position:absolute;
			3: 子元素参考最近的有定位的父元素

		z-index:层级关系;
			auto 默认值
			数字越大,层级越高,反之越小
			可以为负数
			【注】
				必须加了定位的元素才能修改层级关系，默认定位除外
				
				并列(兄弟)关系：
					都能修改层级关系

				嵌套(父子)关系:
					修改子元素的层级关系

	定位居中方式:
		方式一:
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
			margin:auto;

		方式二:
			position:absolute;
			left:50%;
			margin-left:-宽度的一半;
			top:50%;
			margin-top:-高度的一半;

	锚点:实现页面内部的跳转
		1: 点击位置
			<a href="#name"></a>
		2: 跳转位置
			<标签 id="name"></标签>

	透明度:
		opacity:0.5; 
			取值范围: 0-1
			高版本浏览器识别
		filter:alpha(opacity=50);
			取值范围: 0-100
			低版本ie识别