l 本章简介:
在之前的章节中,我们认识了浮动的概念,并使用浮动来布局网页,定位网页元素
今天将要认识另一个重要的属性 position ，使用此属性来定位网页的元素
以及设置元素的堆叠顺序 Z-index 属性。
l 本章单词：
Position 位置
Static 静态
Relative 相对
Absolute 绝对
Fixed 固定
Z-index z轴坐标
Opacity 透明度
Filter 滤镜
Alpha 阿尔法
l 8.1 定位在网页中的应用
在CSS中有三种基本的定位机制，分别是标准流、浮动、和绝对定位。
使用浮动的方式可以定位网页元素，但是仅使用浮动一种方式完成不了网页中很多更为复杂的网页效果。
l 8.2 position属性
Position属性和 float属性都是CSS排版中非常重要的概念。
Position属性有四个属性值：
1. Static属性
默认值，没有定位，元素会按照标准文档流进行布局。
position: static;
2. Relative属性
相对定位，使用相对定位的盒子会以标准文档流的排版方式为基础，然后使盒子相对于它原本的标准位置进行偏移制定的位置，相对定位的盒子仍在标准文档流中。
原来的位置也会被保留下来，并且无论实在标准文档流还是在浮动时，都不会对其他元素造成影响，只针对自身原来的位置进行偏移。
相对定位很少单独使用，大多都是配合绝对定位来使用，为绝对定位创造定位父级而不设置偏移量。
position: relative;
3. Absolute属性
绝对定位，盒子的位置以包含它的盒子为基准进行偏移，绝对定位的盒子会从标准文档流里脱离，这意味着它们对其后的其他盒子的定位没有影响，对于其他的盒子来说这个盒子就行不存在一样。
元素位置发生偏移后，它原来的位置不会被保留下来。
层级也会提高，可以把标准文档流中的元素和浮动的元素覆盖在下面。
使用了绝对定位的元素会脱离文档流。
使用了绝对定位的元素会以它最近的一个“已经定位的”祖先元素为基准进行偏移，如果没有已经定位的祖先元素，那么就会以浏览器窗口为基准进行定位。
position: absolute;
如果需要使某个元素脱离标准文档流，并希望它保持在原来的位置，
可以只设置了绝对定位而不要设置偏移量，那么它将保持在原来的位置。
绝对定位大多用在下拉菜单、焦点轮播图，弹出内容等等。
4. Fixed属性
固定定位，它和绝对定位类似，只是它是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象的位置不变。
固定定位大多用在两边的广告，导航栏等。
position: fixed;
CSS中一共有四个属性配合position属性来进行定位，除了top和left外，还有bottom和right
。这四个属性只有当position属性设置为 absolute、relative、和fixed时才有效。
除了可以设置为像素值时，还可以用百分数。
div{
position: absolute;
top: 200px;
right: -100px;
bottom: 50%;
left: 200%;
}
l 8.3 z-index属性
在 CSS中，此属性用于调整元素定位是重叠的上下层的上下位置。
此属性的值为整数，可以是正数也可以是负数。
默认值是0，属性值越大层级也就越高
z-index: 10;
z-index: -10;
l 8.4 层的透明度
如果想要让某层的透明度改变，可以使用 opacity，值为0~1，值越小越透明。
opacity: 0.5;
或者使用下面这个，这个是老版本的，值为0~100，值越小越透明。
filter:alpha(opacity=0.5);
l 本章总结：
1.学会使用 position 定位网页里元素
2.position属性有 static、relative、absolute、和fixed。
3.学会使用z-index属性设置定位元素的堆叠顺序
4.使用opacity 或者filter:alpha 设置网页元素的透明度。