CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

4 种不同类型的定位

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对定位
是相对以前的自己的位置。
position:relative; 相对定位特征：
1）不影响元素本身的特性
2）不使元素脱离文档流（元素移动之后，原来的位置还是保留）
3）如果没有设置偏移量，对元素本身没有任何影响
4）提升层级

定位元素位置控制
top/right/bottom/left 定位元素偏移量。

绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
position:absolute; 绝对定位特征：
1）使元素完全脱离文档流（绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。）
2）使内嵌支持宽高
3）块属性标签内容撑开宽度
4）如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移。
5）相对定位一般都是配合绝对定位元素使用
6）提升层级

z-index:[number] 定位层级
1）定位元素默认后者层级高于前者
2）建议在兄弟标签之间比较层级

固定定位（fixed定位）
是相对于screen，比如：右下角的小火箭，返回到顶部；或者客服。
position:fixed 固定定位。
与绝对定位的特征基本一致，差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位。

经验：
在定位中，

.div4 {
    background-color: black;
    position: fixed;
    right: 20px;
    bottom: 50px;
}

left,right,top,bottom : Xpx, 是贴近那边，再插入X像素在那一边。

默认static定位，从父元素集成定位属性的值（不兼容）

position:static;  默认
position:inherit;  从父级元素集成定位属性的值（不兼容）

那么一共有5种定位（position:relative|absolute|fixed|static|inherit）

案例：
我们给父级加了透明度，那么它的子集也会继承这个透明度。

不透明度：
标准浏览器 不透明度 opacity: 0~1
IE浏览器 滤镜 filter:alpha(opacity=0~100)