您的位置：首页 > Web前端 > css > 正文

CSS中 z-index 的用法

更多时间：2013-11-12 类别：Web前端浏览量：3258

CSS中 z-index 的用法

CSS中 z-index 的用法

语法：

z-index： auto，数值，inherit。

参数：

数值：

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

auto：

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

inherit:

规定应该从父元素继承 z-index 属性的值。

说明：

检索或设置对象的层叠顺序。
如两个绝对定位对象的此属性具有同样的值，那么将依据它们在HTML文档中声明的顺序层叠
对应的脚本特性为zIndex。请参阅我编写的其他书目。

CSS样式表中Z-index属性的一些特征：

Z-index属性的默认值是0
元素可拥有负的 z-index 属性值，如z-index:-1
Z-index属性无继承性
Z-index属性JavaScript 使用语法：object.style.zIndex=”1″
几乎所有主流浏览器都支持 Z-index 属性

Z-index示意图

Z-index实例

Z-index 用于将在一个元素放置于另一元素之后。

HTML 代码复制


<html>
<head>
<style type="text/css">...
img.x
{...}{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse。jpg" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

效果图：

Z-index 用于将在一个元素放置于另一元素之前。

HTML 代码复制


<html>
<head>
<style type="text/css">...
img.x
{...}{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse。jpg" /> 
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>

</html>

效果图：

CSS样式表中Z-index属性使用的注意事项：

（1）Z-index仅对定位元素有效（如position:relative\absolute\float）；

（2）Z-index只可比较同级元素。这也许是大家很容易忽视的问题，我就卡在了这里。也就是说，Z-index只能对同级元素进行分层展示；

（3）Z-index的作用域：假设A和B两个元素都设置了定位（相对定位、绝对定位、一个相对一个绝对定位都可以），且是同级元素，样式为：.boxA{z-index:4} .boxB{z-index:5}
于是，不难看出，元素B的层级要高于元素A，在此需要指出的是，A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；

（4）这个属性不会作用于窗口控件，如select对象。

（5）在父元素的子元素中设置Z-index的值，可以改变子元素之间的层叠关系

（6）子元素的Z-index值不管是高于父元素还是低于父元素，只要他们的z-index值是大于等于0的数，他们都会显示在父元素之上，即压在父元素上。只要他们的值是小于0的数，则显示在父元素之下！

标签：CSS z-index

上一篇：ILSpy反编译工具的使用

下一篇：.NET中pdb文件的作用

您可能感兴趣

CSS中 z-index 的用法

CSS中 z-index 的用法

热门推荐

排行榜