CSS中的z-index属性

标签: CSS | 发表时间:2012-01-03 23:51 | 作者:dk
出处:http://www.blogread.cn/it/

标签:   z-index

css中z-index也是常用的一个属性,这个z-index说的就是第三轴的位置,网页实际是二维的,但是页面上的元素堆叠的层次就可以看作为第三轴,所以z-index也就很好理解了,在z轴上的索引。好吧我再说的直白一点这里的z-index指的就是哪个元素显示在上面,哪个显示在下面,数值越大的越靠上,会把z-index值比较小的元素挡住。这里的上是指距离用户近。

zindex

在w3的标准文档中指出,z-index属性是针对一个确定位置的盒子(positioned box)起作用的。它指出了:

  1. 盒子的在当前堆叠环境中的堆叠层次
  2. 这个盒子是否创建了一个堆叠环境

z-index的值可以是三种:auto,数值,inherit。

数值:

数值即是盒子在当前的堆叠环境中的堆叠层次。这个盒子也会建立一个新的堆叠环境。

auto:

生成的盒子的堆叠层次在当前堆叠环境中是0。除非它是根元素,否则它不会建立一个新的堆叠环境。

要注意的是,只有设置了对象元素的position不为static的时候z-index才能起作用。也就是需要同时设置position,让对象元素positioned,以及设置了z-index属性这样才能建立一个堆叠环境。如果你的元素未设置position,你把它的z-index设为9999也没用…

再就是堆叠环境的问题,你的z-index是针对当前堆叠环境的,两个元素之间的对比是要看其堆叠环境,而不能单纯的看其z-index的绝对值。

<style>
#d_1,#d_2,#d_3,#d_4{position:relative;}
#d_1{z-index:1;}
#d_2{z-index:10;}
#d_3{z-index:2;}
#d_4{z-index:5;}
</style>
<div id="d_1">
<div id="d_2"></div>
</div>
<div id="d_3">
<div id="d_4"></div>
</div>

如果#d_4与#d_2发生重叠的话,#d_4会覆盖#d_2。这是因为#d_4所在的堆叠环境#d_3的z-index比#d_2的堆叠环境#d_1的z-index高。

最后还有一个问题,如果两个元素在同一个堆叠环境中,而且z-index的值也相同,其堆叠的层次该怎么表现呢?这个问题也很简单,按照文档的顺序来,后来的居上:)

说到这z-index的一些特性已经介绍的的差不多了,你肯定还有一个问题,对,那就是IE,我们没有提IE下的bug,当然IE的bug是不能缺席的,IE下如果你的元素设置了position那IE就会自动创建一个堆叠上下文,即使你没有设置z-index。所以在IE下发生z-index堆叠错误的时候先检查一下你的发生错误的元素是否已经positioned,然后给它设置一个合适的z-index。

这里是我写的一个简单的实例 zindex-demo

相信大部分同学已经对z-index非常熟悉了,我这里写这篇文章主要是应 slllllll的要求,因为可能很多同学是搜z-index这个关键字进来的,点开之后发现竟然没有任何关于css中z-index的内容,未免有些懊恼,所以为了让我们的z-index不至于太坑人,就有了这篇文章。如有谬误还请不吝指教。如果能够对您有所帮助我会很高兴。

有部分内容是翻译了w3的标准,原文详见:

http://www.w3.org/TR/CSS2/visuren.html#z-index

您可能还对下面的文章感兴趣:

  1. 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响 [2009-10-14 13:36:27]


相关 [css index 属性] 推荐:

CSS中的z-index属性

- - IT技术博客大学习
标签:   z-index. css中z-index也是常用的一个属性,这个z-index说的就是第三轴的位置,网页实际是二维的,但是页面上的元素堆叠的层次就可以看作为第三轴,所以z-index也就很好理解了,在z轴上的索引. 好吧我再说的直白一点这里的z-index指的就是哪个元素显示在上面,哪个显示在下面,数值越大的越靠上,会把z-index值比较小的元素挡住.

css overflow属性(转)

- - Web前端 - ITeye博客
1,Overflow内容溢出时的设置.     overflow 水平及垂直方向内容溢出时的设置.     overflow-x 水平方向内容溢出时的设置.     overflow-y 垂直方向内容溢出时的设置. 以上三个属性设置的值为visible、scroll、hidden、auto.     visible 默认值.

小tip:巧用CSS3属性作为CSS hack

- 逸川 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867. 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. ————- 假设这是大家全神贯注思考的18分钟 ————————.

关于z-index的那些事儿

- - 前端观察
关于z-index的真正问题是,很少有人理解它到底是怎么用. 其实它并不复杂,但是如果你从来没有花一定时间去看具体的z-index相关文档,那么你很可能会忽略一些重要的信息. 好吧,看看你能否解决下面这个问题:. 在 接下来的HTML里 有三个
元素,并且每个
里包含一个元素.

理解 B*tree index内部结构

- - CSDN博客数据库推荐文章
转载请注明出处: http://write.blog.csdn.net/postedit/40589651.     Oracle数据库里的B树索引就好象一棵倒长的树,它包含两种类型的数据块:一种是索引分支块,另一种是索引叶子块 索引分支块包含指向相应索引分支块/叶子块的指针和索引健值列(这里的指针是指相关分支块/叶子块的块地址RDBA.

index rebuild和rebuild online的区别

- - CSDN博客数据库推荐文章
       曾经看到过淘宝的这个面试题:在一个24*7的应用上,需要把一个访问量很大的1000万以上数据级别的表的普通索引(a,b)修改成唯一约束(a,b,c),你一般会选择怎么做,请说出具体的操作步骤与语句.        先online建索引添加约束,然后删除原理的索引.        为什么要用online呢.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.