重叠在一起需要改变默认的布局方式，将其中一个显示在上层需要设置深度顺序，这两点分别用如下样式完成
position: absolute /*设置为绝对定位*/z-index:999 /*设置重叠的上下次序，值越大月在上方*/
示例如下
创建Html元素
<div class="top"><div class="b">我是绝对定位，并且重叠在上方</div>
<div class="a">我是默认定位</div>
</div>
设置css样式
div.top{margin:50pxpadding:20pxwidth:200pxheight:200pxborder:2px dashed #ebbcbe}div.top div{width:100pxheight:100pxpadding:10pxcolor:white}
div.a{background:red}
div.b{background:greenposition:absolutetop:100pxleft:100pxz-index:999}
观察显示效果
1、chrome浏览器 F12审查元素的Audits
说明：使用Audits，会检测出页面中没有用到的css，需要手动删除多余的css；同时需要说明的是检测出多余无用的css块，而不是某一行css。
2、CSS usage插件
（1）安装Firefox浏览器
（2）安装firebug
Firefox浏览器--添加附件--搜索插件--安装
（3）安装css usage
步骤同安装firebug一样。
（4）检测
重要说明：可以导出干净的css
由于浮动的元素是脱离了文档流的，所以父元素（没有浮动起来）不再包含它们，下面的例子一里，img和txt都不再被div包含。如果这时候我们在父div里面再加一个元素（例子二），它是被父div所包含的，但是它自身没有大小，所以也不能把父层撑大。例子三中，我们给了这个层清理的css属性，clear：both表示这个元素左右两边都不允许有浮动元素出现。现在我们左边浮了个img，右边浮了个txt，css会怎么处理呢？它会把具有清理属性的元素添加上边距，直到完全避过左右两个浮动的元素框（img和txt）的底部，才开始渲染这个元素（clear层）。于是父容器被clear层凭空增加出来的上边距给撑大了，看起来就象包含了img和txt一样，其实并没有包含。这几个例子你跑完以后再仔细读一下我提供的参考站点。例子一：
<style>
.news {
background-color: gray
border: solid 1px black
}
.news img {
float: left
}
.news p {
float: right
}
</style>
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
例子二：
<style>
.news {
background-color: gray
border: solid 1px black
}
.news img {
float: left
}
.news p {
float: right
}
</style>
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
例子三：
<style>
.news {
background-color: gray
border: solid 1px black
}
.news img {
float: left
}
.news p {
float: right
}
.clear {
clear: both
}
</style>
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
