CSS关于position布局覆盖及解决方案

效果如下：

在第一个div中加入如下代码

效果如下： 可以看出第一层生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。覆盖了第二层的div，脱离出了文档流。 （脱离文档流即是指：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。）

在第一个div中加入如下代码：

效果如下：

relative是生成相对定位的元素，相对于其正常位置进行定位 可以看出，第一个div原本的空间还是在的，它只是相对于自己原本的位置进行下移，并没有脱离文档流。但是它也是会覆盖后边的块。

fixed生成固定定位的元素，是相对于浏览器窗口进行定位。

效果如下：

其效果图与上边absolute一样（是absolute上层父级元素没有position:relative|absolute的情况下才一样） 测试的时候在第一层的上边加入一段文本，将第一个div下移10px,发现会遮挡文字。 说明fixed脱离文档流，会造成覆盖。 其他几个属性我就不一一细说了。 参考：DOM中关于脱离文档流的几种分析

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 在上层div代码中加入z-index：-1； 效果如下：

相当于将第一层置为底层。

代码如下：

基本思想是，在最外层加一个div块，设置为相对定位（在文档流中） 再将第二个div设置为绝对定位（这时它的父元素变为了最外层div，再进行绝对定位） 效果如下： 需要注意的是，此时第二个div是脱离了文档流了的。

虽然第一个div移动了，但它实际在文档流中的位置没有改变，只需要相对于上层div原来的位置设置自己的外边距，就可以实现消除重叠。 测试代码如下：

根据块级元素和行内元素，设定两张图次序。

这是昨天在练习css时遇到的问题，自己动手实验便于加深理解。利用postion可以实现布局，重叠，透明化等设计，但在具体使用时一定要分清在不在文档流中。

（其他方法，欢迎各位博友进行补充。可能有些概念没说清楚，欢迎指点）