全国服务热线:4008-888-888

技术知识

CSS中的z

z-index英语的语法和运用

CSS Code拷贝內容到剪贴板
  1. z-indexauto | <integer>  

z-index 接纳的特性值为:重要字auto和整数金额,整数金额能够是负值(Firefox2.0及以前不适用负值)。

必须留意的是 z-index 尽管很给力,却只能运用于精准定位元素(即设定了 position 特性为非 static 值),其它状况下,z-index 将被忽视。

针对精准定位元素而言,z-index 代表着:

明确该元素在当今堆叠左右文中的堆叠级別。
明确该元素是不是建立了1个新的部分堆叠左右文。


建立堆叠左右文

在标准中表明:当某个元素的 z-index 未显式界定或被特定为 auto 时,该元素不容易造成新的部分堆叠左右文。也便是说它能够和弟兄,先祖,晚辈元素处在同1个层叠左右文中,它们被放在1起较为堆叠级別,儿子能够盖住先祖,父亲还可以盖住儿子,儿子乃至能够翻过先祖,盖住先祖的弟兄,在堆叠左右文中,它们是并级的关联。看来这样1个事例 DEMO1: z-index与建立堆叠左右文

值得开心的是,绝大多数访问器都完成了这个特点;但是在IE6/7下,无论 z-index 值是不是被显式界定,都将造成新的部分堆叠左右文,也便是说子元素不能以翻过是精准定位元素的父亲,子元素都处在新建立的部分堆叠左右文中,只能在內部开展堆叠级別的较为。

深层次浅出

某地区内有个浮层提醒或往下拉菜单,因而将会必须遮挡住该地区之下的地区。

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="a">  
  2.     ...   
  3.     <div class="tips">我是1个简单的浮层提醒</div>  
  4. </div>  
  5. <div class="b">  
  6.     ...   
  7. </div>  

CSS

CSS Code拷贝內容到剪贴板
  1. .a{position:relative;}   
  2. .tips{position:absolute;z-index:99;}  

如上HTML/CSS编码,很明显,浮层 tips 将能够遮盖在其父级元素 a 的弟兄元素 b 之上。

因而你的用意获得完成,实际效果以下图:

但是很明显,你仍然没法精确的分辨出在各访问器下,tips 能盖住 b 是由于其父级的精准定位還是自身的精准定位。

可是大家能够做这样1个检测,大家让 b 也有着精准定位,Code以下:

CSS

CSS Code拷贝內容到剪贴板
  1. .a{position:relative;}   
  2. .tips{position:absolute;z-index:99;}   
  3. .b{position:relative;}  

这段编码run完以后,就较为纠结了,你能获得的实际效果可能以下:

最先,大家来讲解1下这个事例:由于 a 和 b 全是 relative 且沒有界定 z-index (等同于于z-index:auto),依据后来者居上的标准,此时 b 的堆叠级別是要高于 a 的,意思便是说 a 是没法遮挡住 b 的。但是从 DEMO3 中,大家看到 a 的子元素 tips 遮挡住了 b,这就表明 tips 能翻过它,因此能够分辨出 a 沒有建立新的部分堆叠左右文。很显著,这是彻底吻合规范对此的界定。

但是这是在非IE6/7之下結果。在IE6/7下,大家看到 tips 并没能遮挡住 b,也便是说 tips 没法翻过父级,由于 a 建立了新的部分堆叠左右文,而 a 的堆叠级別又比 b 低,因此 tips 没法遮挡住 b,这也便是在IE6/7下常出現遮盖Bug的根本原因。

能得出下列结果:

当精准定位元素沒有显式界定z-index值时,不容易建立新的部分堆叠左右文
子元素有将会和先祖的弟兄或先祖弟兄的子元素处在同1个堆叠左右文中
在具体工作中中,一些状况将会是你没留意或早已存在的。例如你事前将会其实不了解 b 也是精准定位元素,或因为一些缘故,你必须将其设定为精准定位元素,因而将会出現各种各样适配难题。假如你不上解 z-index 是怎样建立部分堆叠左右文,且又没留意到IE6/7的完成不正确,那末解决起这样的难题可能让你陷入泥潭。

因此在具体的情景中,假如是以便互相遮盖而设定为精准定位,那末显式的界定 z-index 值,将可防止出現建立新部分堆叠左右文差别。

假如必须翻过先祖和其它区块內部元素开展互相堆叠,那末考虑到IE6/7的状况,也应当尽可能防止给父级元素进精准定位。

opacity与堆叠左右文

大家了解 opacity 特性是用来设定元素不全透明度的。但将会了解 opacity 和堆叠左右文相关的很少,但是没事儿,这里大家简易聊聊这个话题,有两点务必留意:

当opacity值小于1时,该元素会建立新的部分堆叠左右文,也便是说它能够和精准定位元素开展堆叠层别较为
当opacity值小于1时,该元素有着堆叠级別且非常于z-index:0或auto,但不可以界定 z-index ,除非自身是精准定位元素
简易来讲,当1个一般的元素界定了 opacity 的值小于1时(例如 opacity:.5),那末该元素的堆叠级別可能高于一般元素,其实际效果类同于精准定位元素沒有显式界定 z-index 的状况,唯1的差别是沒有显式界定 z-index 的精准定位元素不容易造成部分堆叠左右文,而界定了 opacity 值小于1的元素会造成新的部分堆叠左右文。

opacity猜测

假设大家有 a, b, c 3个元素,它们互相层层遮盖在1起,假如这时候将 a 元素界定为 opacity:.8,你了解結果会如何吗?

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="a">a</div>  
  2. <div class="b">b</div>  
  3. <div class="c">c</div>  

CSS

CSS Code拷贝內容到剪贴板
  1. .a,.b,.c{width:100px;height:100px;}   
  2. .a{opacity:.8;background:#999;}   
  3. .b{margin:-70px 0 0 30px;background:#090;}   
  4. .c{margin:-70px 0 0 60px;background:#f00;}  

假如你看搞清楚了我针对 opacity 与堆叠左右文的叙述,坚信你能够猜到結果,是的,a 元素可能遮盖 b 和 c 元素,尽管它在HTML文本文档中出現在 b 和 c 以前,且并不是精准定位元素。

务必看看实际的示例并不是么?DEMO4: opacity与部分堆叠左右文猜测。

假如大家将 b 和 c 设定为精准定位元素,又可能怎样呢?

CSS

CSS Code拷贝內容到剪贴板
  1. .a,.b,.c{width:100px;height:100px;}   
  2. .a{opacity:.8;background:#999;}   
  3. .b{position:relative;margin:-70px 0 0 30px;background:#090;}   
  4. .c{position:relative;margin:-70px 0 0 60px;background:#f00;}  

不急,大家能够接着看示例 DEMO5: opacity与部分堆叠左右文猜测2。

当1个一般元素界定了 opacity 为小于1的值时,该元素将像精准定位元素1样有着堆叠级別,能够遮盖一般元素,而且其堆叠级別与未显式界定 z-index 的精准定位元素1样。

opacity建立部分堆叠左右文

与未显式界定 z-index 的精准定位元素唯1不一样的是 opacity 值小于1的元素会建立部分堆叠左右文。

建立部分堆叠左右文代表着甚么,前文大家早已详细描述过。因此已不赘述,这里只给1个示例用以认证该特点。先奉上编码:

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="a">a   
  2.     <div class="d">d</div>  
  3. </div>  
  4. <div class="b">b</div>  
  5. <div class="c">c</div>  

CSS

CSS Code拷贝內容到剪贴板
  1. .a,.b,.c,.d{width:100px;height:100px;}   
  2. .a{opacity:.8;background:#999;}   
  3. .b{position:relative;margin:-70px 0 0 30px;background:#090;}   
  4. .c{position:relative;margin:-70px 0 0 60px;background:#f00;}   
  5. .d{position:absolute;z-index:99;height:50px;background:#090;}  

你会发现尽管 a 的子元素 d 将 z-index 界定为99,但 d 依然没法遮挡住 b 和 c 元素,这是由于 a 建立了新的部分堆叠左右文,d 元素没法跨越父级。

必须留意的是,此时即使 a 元素变为了精准定位元素,也不可以更改其会建立新部分堆叠左右文的运势,由于他设定了 opacity:.8。

依照大家前文所说,假如 a 沒有界定 opacity:.8 ,但却像 b 和 c 元素1样设定了 relative,那末其子元素 d 将能够遮盖 b 和 c,至于这个事例就已不奉到了,大伙儿随意写个检测1下便可。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服