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

先来介绍一下position的定位方式

1.两个div都没定位

<div style="width: 300px;height: 300px;background-color: yellow;">
  第一层
 </div>
<div style="width: 300px;height: 300px; background-color: blue;">
 第二层
</div>

效果如下：

2.将第一个div使用absolute定位

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

position：absolute;
top:100px;

效果如下：

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

3.将第一个盒子使用relative

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

position:relative; 
top:100px;

效果如下：

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

4.fixed属性定位

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

<p>hello world!</p>
 <div style="width: 300px;height: 300px;background-color: yellow; position:fixed; top:10px;">
 第一层</div>
<div style="width: 300px;height: 300px; background-color: blue;">
 第二层</div>

效果如下：

其效果图与上边absolute一样（是absolute上层父级元素没有position:relative|absolute的情况下才一样）
测试的时候在第一层的上边加入一段文本，将第一个div下移10px,发现会遮挡文字。
说明fixed脱离文档流，会造成覆盖。




其他几个属性我就不一一细说了。
参考：DOM中关于脱离文档流的几种分析

解决方案：

1.z-index属性

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

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

2.使用文档流的特性（不会覆盖）

代码如下：

<div style="position:relative;">
 <div style="width: 300px;height: 300px;background-color: yellow;">
  第一层</div>
 <div style="width: 300px;height: 300px; background-color: blue; position: absolute;">
 第二层</div>
</div>

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

需要注意的是，此时第二个div是脱离了文档流了的。

3.下层设置margin-top

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

<div style="width: 300px;height: 300px;background-color: yellow;position: relative;top:30px;">
 第一层</div>
 <div style="width: 300px;height: 300px; background-color: blue; margin-top: 30px; ">
 第二层</div>

4.普通流

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

总结：

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

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