Liny_@NotePad

沉迷ACG中

层的显示优先级

YOYO posted @ 2012年3月18日 12:39 in 【Web开发】客户端 with tags DIV CSS , 3349 阅读

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

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

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

先提下概念:

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

于是记下这几个法则:

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

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

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


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter