注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

关于对CSS样式z-index的理解  

2014-04-17 21:13:57|  分类: Css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
说到z-index属性,很多人以为很简单,其实不然。

基本用法
(摘自 http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。


深入理解z-index (摘自 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)

要先深入理解z-index,必须理解 stacking context

stacking context是一种特殊属性的容器,那些元素具有stacking context特殊属性

  • the root element (HTML), html根元素
  • positioned (absolutely or relatively) with a z-index value other than "auto", 已定位的元素并z-index有值(值不能是auto)。
  • elements with an opacity value less than 1. (opacity值小于1的值)

总结stacking context的特性

  • Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity).
  • Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
  • Each stacking context is completly independent from its siblings: only descendant elements are considered when stacking is processed.
  • Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

在建立起stacking context概念的情况下理解下面的例子

例子1

关于对CSS样式z-index的理解 - 星期五 - 星期五
 
关于对CSS样式z-index的理解 - 星期五 - 星期五
在不同的stacking context中的元素,按照元素自己z-index值沿z轴排序。
 
基本上可以这样表示:
DIV #2: z-index 2
DIV #3: z-index 4
          DIV #5: z-index 4.1
          DIV #6: z-index 4.3
          DIV #4:z-index 4.6
DIV #1: z-index 5

例子2

关于对CSS样式z-index的理解 - 星期五 - 星期五
 
参考资料:

http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context


  评论这张
 
阅读(162)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017