码迷,mamicode.com
首页 > 其他好文 > 详细

深入z-index

时间:2016-04-18 18:52:53      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

  今天看了张鑫旭大神关于z-index的视频。下面写下自己暂时的总结。可能有不到位的地方~以后再回来修改

  首先说一些基本的概念和规则:

  层叠上下文:1.页面根元素 2.定位元素且z-index值为数值 (可见z-index受限于层叠上下文)3.设置其他属性时(尤其CSS3中的很多属性)。以上情况,将会使元素拥有层叠上下文,拥有层叠上下文的层叠水平比普通元素高,所以如果普通元素没有层叠上下文,会一直“下沉”,直到遇到页面根元素,视其为层叠上下文

  层叠水平:在一个层叠上下文中的显示顺序(z轴)方向,层叠水平是所有元素都有的,而z-index只有定位元素才有

  层叠顺序:是规则,一个完整的层叠上下文元素需要遵循这样一个规则:见七阶层叠水平图

  层叠比较:首先总的规则是:1.文档流中的顺序,谁后谁上 2.z-index大小,谁大谁上;

       需要注意一些情况 : 如果有嵌套,子元素由其父元素之间比较结果而定。

  当然还需要很多例子来说明,未完待续……

深入z-index

标签:

原文地址:http://www.cnblogs.com/jane-wu/p/5405120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!