HTML网页入门D6——透明度、定位position（实现元素的叠加）

HTML元素的定位、透明度

写在前面：元素的定位功能很强大，可以使元素相对于自身、父级元素、甚至浏览器出现在指定的位置上；还可以实现多个元素相互堆叠展示，并控制它们堆叠的顺序。

1、定位的position属性

position属性的值：

值	描述
absolute	生成绝对元素，相对于static定位以外的第一个父元素进行定位，元素的位置通过left、top、right以及bottom属性进行规定
fixed	生成绝对定位元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及bottom属性进行规定
relative	生成相对定位元素，相对于其原本的正常位置进行定位，元素的位置通过left、top、right以及bottom属性进行规定
static	默认值，没有定位，元素出现在正常的流中（忽略top、bottom、left、right以及z-index属性
inherit	从父元素中继承position属性

例（设置相对定位）：

position: relative;

定位的其他相关属性:

属性	描述
position	规定元素的定位类型
left	设置定位元素左外边距边界与定位块左边界之间的偏移
right	设置定位元素右外边距边界与定位块右边界之间的偏移
top	设置定位元素上外边距边界与定位块上边界之间的偏移
bottom	设置定位元素下外边距边界与定位块下边界之间的偏移
z-index	设置元素的堆叠顺序，即元素的层级

2、层级

绝对定位和相对定位都可以提升元素的层级。
元素发生堆叠时，按照普通文档流中的规律，后面的元素显示在前面的元素上面。
在定位中，层级高的元素显示在层级低的元素上面，元素的层级默认为1。
例(设置层级为2）：

z-index:2;

（通过设置层级可以在结构不变的情况下，达到文字在图片上方的效果）

3、相对定位

如果一个元素进行相对定位（position:relative），它不会发生变化。可以通过设置垂直（top、bottom）或水平（left、right）位置，让这个元素相对于它的起点进行移动。
例：

position:relative;
left:100px;
top:100px;

相对定位的特点：

1. 不影响元素本身性质；
2. 使元素不脱离文档流（元素移动后，其原始位置会被保留）；
3. 如果没有设置定位偏移量，对元素本身没有影响；
4. 提升层级。

4、绝对定位

绝对定位（position:absolute）的元素位置是相对于“最近的除static外已定位祖先元素”进行定位的，如果没有已定位的祖先元素，那么它的位置是相对于最外层的元素（HTML元素）定位的。
例：

position:absolute;
left:0;
top:100px;

绝对定位的特点：

1. 没有设置偏移量时，元素的位置不发生变化；
2. 使元素完全脱离文档流（会发现元素叠加现象）；
3. 内联元素支持宽高；
4. 块元素默认由内容撑开宽度；
5. 若有定位父级，相对于离自己最近的祖先元素偏移，若没有定位父级，相对于document（< html >元素）发生偏移；
6. 相对定位一般都是配合绝对定位使用（即父元素设置相对定位，子元素设置绝对定位）；
7. 提升层级。

5、固定定位

固定定位（position:fixed）是相对于浏览器的窗口进行的定位，即页面滚动，固定定位元素在视窗中的位置也不会变化。
例：

position:fixed;
right:20px;
top:300px;

6、透明度

改变元素透明度的两种方法：
一是：opacity
opacity设置整个元素的透明度，并且会被子元素继承。

opacity:value(0-1);/*value取值范围为0~1*/

二是：rgba(r,g,b,a)
rgba(r,g,b,a)是颜色相关属性的属性值，色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
取值如下：
r：红色值，正整数或百分数。 g：绿色值，正整数或百分数。
b：蓝色值，正整数或百分数 a：透明度，取值0~1之间。

区别：

1. opacity是属性，rgba(r,g,b,a)是属性值；
2. 有opacity属性的元素，其子元素会继承透明属性，rgba则不会；
3. opacity属性设置整个元素透明度，包括图片、背景、字体颜色的透明度；rgba则根据应用它的属性，设置对应的透明效果。

PS：
具体定位代码及效果图可参考此篇博文