z-index 的属性的介绍

来源：互联网发布：www.gubaiyou seo.com 编辑：程序博客网时间：2024/06/08 10:18

z-index设置元素的层叠顺序！设置定位元素对于Z坐标轴的位置
z-index可为正直，可为负值，正直越大表示顺序越上！
语法：
Object.style.zIndex=auto|number|inheritauto 一般默认为 0ps：z-index 仅能在定位元素上奏效（如：position：absolute）inherit 为继承父元素的属性值  但：在IE不支持
无论父定位元素的z-index(A z-index:10 )的值比同兄弟( B x-index：20)的属性值小，则无论A的子元素的z-index的之多大都会被B及B的子元素覆盖！
简单举了个例子：
<!DOCTYPE HTML><html><meta http-equiv="content-type" content="text/html; charset=utf-8"><head><script type="text/javascript">function change(){document.getElementById("01").style.zIndex="-1";}function change1(){document.getElementById("01").style.zIndex="5";}</script></head><body><div style=" position:relative; z-index:0"><div id="01" style="width:250px; height:250px; z-index:5; background-color:#F00; margin:30px 0 0 30px; float:left;position:absolute;">         <div  id="011" style=" width:100px;height:100px; z-index:10; background-color:#000; margin:10px 0 0 10px;position:absolute;">         </div>    </div>    <div id="02" style="width:250px;height:250px; z-index:4; background-color:#00C; margin:100px 0 0 100px; position:absolute; float:left;">    <div  id="011" style=" width:100px;height:100px; z-index:-2; background-color:#0F0; margin:10px 0 0 10px;position:absolute;">         </div>    </div>    <input type="button" onClick="change()" value="改变z-index"/>    <input type="button" onClick="change1()" value="取消"/>    </div></body></html>
应该很好看懂，那z-index 有什么用处或者用在哪里？
举几个我在别人博客里看到的运用介绍
×Z-index 属性可用来实现基于CSS的提示气泡，就像下面trentrichardson.com展示的那样

×下拉菜单：
类似于Brainjar’s classic Revenge of the Menu Bar的下拉菜单使用Z-index以确保菜单的按钮和他们的下拉项位于层叠的顶部
×又比如网票网中的电影介绍层就有运用
等等...总之灵活熟悉的运用是基本要求，实现更好的功能才是目的