css---学习之路（元素定位，设置元素透明度的方法）

定位：

position（元素定位）：

static：默认值，没有定位（一般不用）

relative：相对定位

示例：

.test1{
	width: 100px;
	height: 100px;
	background: blue;
	position: relative;
	left: 50px;
	top: 100px;
}

特点：

relative 相对定位 ：
1、占有原来的位置，
2、仍然具备原有块内元素的特点
4、移动位置，上下左右，上和左优先，

absolute：绝对定位

示例：

	.test2{
	width: 100px;
	height: 100px;
	background: pink;
	position: absolute;
	left: 50px;
	top: 100px;
}

absolute绝对定位的特点：

找父级，如果没有父级则以浏览器窗口为定位
1、不占有原有的位置
2、具有inline-block 行内元素的特点，需要添加宽度和内容才会生效
绝对定位过的盒子不能使用margin 0 auto居中;
可以使用下列代码进行居中：

	.test2{
	width: 100px;
	height: 100px;
	background: pink;
	position: absolute;
	/*
	 absolute绝对定位  设置盒子相对于父容器居中显示
	 transform: translate(-50%,-50%);   自动计算宽度和高度的一半
	 */
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

由于设置50%时会往中间线右有所偏移所以使用css3中的 transform: translate(-50%,-50%); 可以用来自动计算宽度和高度的一半进行自动计算

fixed：固定定位

示例代码：

.test3{
	width: 100px;
	height: 100px;
	background: pink;
	position: fixed;
	left: 0;
	top: 0;
}

fixed固有定位特点：

固有定位：
根据浏览器的位置来定位。
脱标，不占有原来的位置。
具备inline-block 行内元素的特点 需要添加宽度和内容才会生效。
浏览器往下拉时，元素的位置依然不变。

z-index属性：

特点：
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系，
z-index值大的层位于其值小的层上方

小结：
后面的元素可以盖在前一个元素上方
网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境，z-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

元素的透明度：

元素的透明度设置有三种：

rgba(0，0，0，百分数)

百分数用来设置颜色的透明度

opacity:x

x值为0~1，值越小越透明
示例：

opacity:0.4;

注意：设置此属性时会将背景颜色和字体一起增加透明度

filter:alpha(opacity=x)

x值为0~100，值越小越透明
filter:alpha(opacity=40);