层的显示优先级
现在的企业网站上通常都会在侧边加上一个客服联系方式的层,固定在一个地方,方便客户随时点来咨询。
这次做的一个,发现这个层会被主层盖住,于是给它加上了z-index属性,设了一个比较高的值。
不过以前做的都不曾遇到这种情况,百度了一下才发现缘由:《DIV+CSS制作网页之如何设置z-index》
先提下概念:
- 动态定位:relative、absolute、fixed
- 静态定位:static(position的默认值)
- 同辈元素:同一个父类下面的元素。
于是记下这几个法则:
- 法则一、同辈元素定位方式相同,且无z-index设置时,html靠后者居上。
- 法则二、同辈元素同为动态定位时,且有z-index设置时,z-index值大者居上。
- 法则三、同辈元素定位方式不同时,不论有无设置z-index,动态定位均居上。
- 法则四、非同辈元素,任意一者及其祖元素不具备动态布局时,html靠后者居上。
- 法则五、非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。
前面说到,之前没有出现这种被主层盖住的情况,就是因为法则一,主层和联络方式层的定位方式都为动态定位,而我习惯把这些附加的东西都放在后面写……这次跑到主层前面来就被盖住了。
以上几个法则在前面的链接中都有sample,在此不再赘述,有需要的同学自己点进去看吧。
2012年3月18日 22:19
好文,备用!