1.z-index只能在position属性值为relative/absolute/fixed的元素上有效。若子元素设置z-index后仍被覆盖,应考虑含有position设置的父元素的z-index设置情况。
2.设置float元素时发生的问题:
⑴对于设置float样式的子元素,它的父元素的高度无法自适应,float元素漂浮不会撑开父元素的高度,所以父元素需要设置高度或清除浮动。
⑵非替换元素在设置左右浮动时,需要指定明确的宽度,否则宽度会趋于0而导致无法显示效果。
3.margin:0px auto;解决自适应居中问题
4.margin发生重叠现象
⑴对于相邻的两个普通的div,两个div之间的上下边距不会简单叠加,而是取其中较大的边距值。
<style>
#div1 {width:800px; height:100px; margin-bottom:50px; background:red;}
#div2 {width:800px; height:100px; margin-top:50px; background:blue;}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

#div1 {width:800px; height:100px; margin-bottom:50px; background:red;}
#div2 {width:800px; height:100px; margin-top:100px; background:blue;}

⑵对于div嵌套,父div的高度不会被子div的margin撑开,margin-top和margin-bottom会发生重叠。给父div加padding可解决问题
<style>
#div1 {margin:100px; width:300px; background:red;}
#div2 {margin:100px; width:100px; height:100px; background:blue;}
</style>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>

#div1 {margin:100px; width:300px; padding:10px; background:red;}

原文:http://www.cnblogs.com/zyt654/p/5103944.html