CSS定位补充及CSS3过渡

1.z-index

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

网页中的元素都含有两个堆叠层级

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

2.背景颜色透明度

background-color: rgba(255,0,0,.5);亦或是

background: red;

opacity: 0.5; opacity值在0-1之间，越接近0越透明

3.CSS3过渡

transition: background 2s;

transition: margin 2s;

transition: all 2s linear 1s

linear为匀速

ease慢速开始，然后变快，然后慢速结束，也是默认值

transition: all 2s ease-in 慢速开始，快速结束

ease-out 慢速结束，快速开始

ease-in-out 慢速开始，中间快速，慢速结束

transition: all 2s linear 1s;

1s为过渡延迟时间

正值：元素过渡效果会根据设置的时间再开始执行过渡

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 速度回变快

默认值时过渡效果会立即开始