现在的企业网站上通常都会在侧边加上一个客服联系方式的层，固定在一个地方，方便客户随时点来咨询。

这次做的一个，发现这个层会被主层盖住，于是给它加上了z-index属性，设了一个比较高的值。

不过以前做的都不曾遇到这种情况，百度了一下才发现缘由：《DIV+CSS制作网页之如何设置z-index》

先提下概念：

• 动态定位：relative、absolute、fixed
• 静态定位：static（position的默认值）
• 同辈元素：同一个父类下面的元素。

于是记下这几个法则：

• 法则一、同辈元素定位方式相同，且无z-index设置时，html靠后者居上。
• 法则二、同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。
• 法则三、同辈元素定位方式不同时，不论有无设置z-index，动态定位均居上。
• 法则四、非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。
• 法则五、非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

前面说到，之前没有出现这种被主层盖住的情况，就是因为法则一，主层和联络方式层的定位方式都为动态定位，而我习惯把这些附加的东西都放在后面写……这次跑到主层前面来就被盖住了。

以上几个法则在前面的链接中都有sample，在此不再赘述，有需要的同学自己点进去看吧。

• 相关文章