z-index属性

转载 2015年07月08日 21:16:34

<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:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

亲自试一试

浏览器支持

所有主流浏览器都支持 z-index 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

默认值: auto
继承性: no
版本: CSS2
JavaScript 语法: object.style.zIndex="1"

可能的值

描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

用处2:页面右侧导航栏

深刻解析position属性以及与层(z-index)的关系

[原创]深刻解析position属性以及与层(z-index)的关系   2010-09-15 09:13:15|  分类: Web编程 |  标签:css  position  relativ...

利用z-index属性实现网页弹出框

java web应用开发过程中,有些用户操作需要以弹出框形式展示,今天对以往项目开发中的弹出框实现原理仔细分析了一下,使用CSS的z-index属性,可以实现简单的弹出框效果。具体原理: .mask{...

div层调整z-index属性无效原因分析及解决方法

div层调整zindex属性在IE中无效原因分析及解决方法很久没有写前端代码了,最近有个项目需要亲自动手,但是在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。在CS...

理解 CSS 的 z-index 属性

通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素。 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放,...

Z-index属性

大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-index属...

CSS教程:彻底掌握Z-index属性

大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-inde...

你真的了解z-index属性了吗?

在编码的过程中,我们常常用z-index去控制元素的层叠顺序.那么我们真的了解它了吗?z-index的语法:(参考W3C文档) 属性 值 Value auto integer inhe...

项目中弹出页面的显示层次问题 CSS中z-index属性

1.CSS z-index 属性 定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素可拥有负的 z-index 属性值...

详解CSS的z-index属性(带图片解析)

个人总结的CSS的z-index属性,很通俗易懂,有图解说明。

ActiveX插件的Z-Index属性无效问题解决

在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种方式在多数情况下很有效,但是如果遇到有窗体元素时这种方式常常显得无能为力,今天我们就一块看一下如何有效的解决这个问题。 网页...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:z-index属性
举报原因:
原因补充:

(最多只允许输入30个字)