Liny_@NotePad

沉迷ACG中

层的显示优先级

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

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

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

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

先提下概念:

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

于是记下这几个法则:

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

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

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

Online Payment Of Ko 说:
2022年8月07日 17:06

Kotak Bank is the most popular bank in India which provides various services to the customer of all different kinds, and the customers of Kotak bank can avail the credit card facility based on their financial transaction and get a good credit limit for emergency usage. A credit card does manage your credit score in all kinds and thus managing it well will keep your CIBIL score good, Online Payment Of Kotak Credit Card and it is always advised to pay the Kotak bank credit card payment in time to avoid the penalty charges and as well save you from disturbing your financial status. 25penny.com will discuss all the possible ways to complete the payment within time with a faster process, let’s check all in detail.


登录 *


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