网页CSS对div重叠，同行显示等使用总结

div的重叠之前在工作之中多次用到，在这里准备加以总结，方法如下：

当div的布局被定义为默认的类型（static）那么通过float形式将前一个div进行向左浮动，这样即可以得到两个div的起始位置重叠，比如

<div id='div1' style='width:20%;height:20%;background-color:red;'/>

<div id='div2' style='width:20%;height:20%;background-color:black;'/>

得到结果就应该是等大的红色div、黑色div垂直方向对齐显示

<div id='div1' style='float:left;width:20%;height:20%;background-color:red;'/>

<div id='div2' style='width:20%;height:20%;background-color:black;'/>

得到结果就应该是等大的红色div（即div1）覆盖在黑色div的区域上

这个时候我们就可以调整div的透明度来显示div1和div2重叠的效果

#div1{float:left;width:20%;height:30%;background-color:red;opacity:0.7;filter:alpha(opacity=70);}

#div2{width:30%;height:20%;background-color:black;}

#div3{width:40%;height:20%;background-color:blue;}

此外添加了一个蓝色div3然后修改div1的透明度，效果就变成了div3与div2垂直方向对齐并相临，div1覆盖在div2和div3的上一层。

如果继续向左浮动div2的话那么就变成了这样的效果，层次关系为div1=div2>div3

div3从父控件的的起始点开始计算位置,div1与div2水平对齐覆盖在div3的上一层

除此之外，当div被向右浮动的时候也是有有趣的效果的，比如

#div1{float:right;width:80%;height:40%;background-color:red;opacity:0.7;filter:alpha(opacity=70);}

#div2{width:80%;height:50%;background-color:black;}

div1跑到了div2的右侧，其实这两个div并没有什么联系了，就是因为div1事先被浮动了，就跑到了最右侧。这样也能达到div重叠的效果。

所以总结起来div通过浮动效果而发生重叠的效果，其实就是让先被定义的div进行浮动或左或右

而要被覆盖的div定义在其之后不能发生浮动。这样就可以保证他们在同一个水平坐标下了。

Div通过浮动达到同行显示其实原理即是如此,不过还有一种方式，就是当第一个div与第二个div的宽度之和不大于屏幕的宽度时候可以通过不动第一个div，向左浮动第二个div来实现，同行显示两个div，此处不做多解释了。

另一种方式则是将div的布局定义成绝对位置的position:absolute;

这样通过z-index属性设定div显示的层次，通过left、left、bottom、right属性直接设置位置如：

#div1{position:absolute;z-index:-1;width:10%;height:40%;background-color:red;opacity:0.7;filter:alpha(opacity=70);}

#div2{width:80%;height:50%;background-color:blue;opacity:0.7;filter:alpha(opacity=70);}

此时有一件事情要说，就是当该控件的布局已经不是static的了那么float的方法将会失效，这里之前看了一下貌似这是两种不同的流加载方式所以float只适用于position:static;类型的控件

第一个就是用float形式处理上述问题的时候并不能处理图片资源，所以想要做什么文字覆盖图片什么的还是要用第二种方式进行分层。此外，就是IE9有些地方处理方式很另类，具体什么地方，因为当时工作中遇到很多问题并没有留心记录一时也想不起来，回头有时间重新看看项目再总结吧，感觉总结的很乱，不晓得说的明白不