金山老师的笔记定位
定位
position属性
static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
标准文档流
标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；
行内元素是在一行中水平布置，从左到右的排列；span,strong等属于行内元素
相对定位
relative属性值
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom可以用left来描述盒子向右移动； 可以用right来描述盒子向左的移动； 可以用top来描述盒子向下的移动； 可以用bottom来描述盒子的向上的移动； 如果是负数就是相反的方向。
相对定位的盒子，不脱离标准流，老家保留位置，其后的元素不能占用其原有位置。
绝对定位
absolute属性值 偏移设置： left、right、top、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离，其后的元素会占据其原有的位置。
往往将父元素设置定位position的值为relative
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1{
border: solid 2px green;
position: relative; /* 不脱离文档流 */
}
.d2{
border: solid 1px red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="d1">块111111111
<div class="d2">块2222222222</div>
</div>
</body>
</html>z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
网页元素透明度
CSS设置元素透明度 opacity:x x值为0~1，值越小越透明 opacity:0.4;
filter:alpha(opacity=x) x值为0~100，值越小越透明 filter:alpha(opacity=40);
<style>
.container{
position: relative;
}
.container div{
position: absolute;
}
</style>
<div class="container">
<div style="background-color: #008000;z-index: 100;opacity: 0.4;">11111111111</div>
<div style="background-color: #0000ff;left: 10px;top: 10px;z-index: 50">22222222222</div>
<div style="background-color: #ffff00;left: 20px;top: 20px;z-index: 10">333333333333</div>
</div>