CSS的Z-index属性深度解剖

2010-01-15 09:40:43 作者：网友来源：互联网

三、为什么它会产生混乱？

即使Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。

为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。

全透视:CSS Z-index 属性（图二）

灰色的BOX具有“9999”的Z-index值，蓝色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎逻辑的，你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定position属性。

下面是同样的三个BOX，分别都被设置了position: relative，他们的Z-index值还是按照上面那段设定。

全透视:CSS Z-index 属性（图三）

现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的BOX覆盖在蓝色之上，蓝色的覆盖在金色之上。

语法

#grey_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #ccc; 
    background: #ddd; 
    position: relative; 
    z-index: 9999; 
} 

#blue_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #4a7497; 
    background: #8daac3; 
    position: relative; 
    z-index: 500; 
}

#gold_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #8b6125; 
    background: #ba945d; 
    position: relative; 
    z-index: 1; 
}

重复一下，Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视，尤其是对于那些新手。

相关热词：Z-index CSS布局 CSS定位

分享到：

更多...

收藏至我的帐号

教程排行榜: 21个令人惊叹的CSS技术（案例）展示; 看这些用CSS3绘制的图标，你震撼了吗; HTML5的Video标签详细说明手册; 如何使一个DIV层居中于浏览器中？; 加一段代码让IE6支持hover伪类效果; IE PNG Fix—让IE6完美支持PNG透明图片的插件; CSS Sprite(CSS精灵)的优点和使用方法; 最新的IE6、IE7和IE8的CSS BUG汇总列表; 深入理解CSS的inherit与auto之间区别; 用浮动清除LI元素在IE6中底部3像素的BUG; CSS3教程：17种用CSS实现的很酷炫的立体网...; 解决IE6下PNG图片透明的最佳方法; IE的几个最常见BUG及解决方案; DIV+CSS布局两列右列宽度自适应布局的不同...; CSS样式的postion属性absolute和fixed的区别; CSS教程：用相对定位实现简单的图片边框阴...

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...