浅析CSS——元素重叠及position定位…

转载地址： http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html

多次在项目中遇到html页面元素的非期待重叠错误，多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的，说到底还是对z-index的理解比较模糊，可以解决问题却不大了解其原因，导致重复出错......于是决定把重叠问题弄清下，把z-index理顺下。

经过一番查找对比实践理解，下面就从元素重叠的背景常识及可能原因说起，浅谈下position定位元素的z-index顺序。总结下我目前的理解，希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发。

 

元素位置重叠的背景常识

(x)html文档中的元素默认处于普通流（normal flow）中，也就是说其顺序由元素在文档中的先后位置决定，此时一般不会产生重叠（但指定负边距可能产生重叠）。当我们用css为某个元素指定float浮动或者position定位后，元素的定位将会依情况发生如下改变：

1. 指定float值left/right

行内元素也会隐形变成块元素，元素会脱离文档的普通流，向左或右浮动，直到其外边缘碰到包含框或另一个浮动框。

2. 指定position值relative

可以相对于其在普通流中的位置偏移，原本所占的空间仍保留。

3. 指定position值absolute

行内元素也会隐形变成块元素，元素会脱离文档的普通流，相对于最近的已定位祖先元素偏移，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块偏移。

4. 指定position值fixed

元素会脱离文档的普通流，相对于浏览器窗口偏移，固定在浏览器的某个位置。

以上四种情况下，文档中的元素都将可能被浮动/定位元素覆盖产生重叠。

 

元素位置重叠的可能原因

1. 负边距/float浮动

margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素（如无兄弟元素则为父元素的左内侧/上内侧）,margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局，但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。