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:页面右侧导航栏

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

个人总结的CSS的z-index属性,很通俗易懂,有图解说明。
  • qiushi_1990
  • qiushi_1990
  • 2014年11月02日 22:05
  • 3975

关于设置z-index层级无效的问题

明明设置了属性z-index,但是为什么在网页上显示无效呢?
  • m0_38099607
  • m0_38099607
  • 2017年04月13日 09:11
  • 7623

z-index的属性

不可忽视的z-index属性 2011-02-16浏览:1252 CSS中z-index属性的参数: z-index auto | number auto:默认...
  • u010433704
  • u010433704
  • 2015年04月24日 08:46
  • 958

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

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

js 修改z-index的值

js 修改z-index的值,有如下方法: 1、$(".modal-content").css({"z-index":200}) 2、 $(".modal-content").css("z-in...
  • aphy358
  • aphy358
  • 2015年12月03日 10:03
  • 2385

HTML元素的Z-index属性是如何工作的

摘要在一个Web页面上有很多种方法去把元素分类. 基于本文的目的和z-index属性, 我们可以把他们分为两类: 窗口类和非窗口类.窗口类元素• 标志元素• ActiveX 控件• Plug-ins...
  • flynetcn
  • flynetcn
  • 2006年12月15日 19:21
  • 6594

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

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

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

[原创]深刻解析position属性以及与层(z-index)的关系   2010-09-15 09:13:15|  分类: Web编程 |  标签:css  position  relativ...
  • limlimlim
  • limlimlim
  • 2014年06月03日 15:21
  • 3336

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

在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种方式在多数情况下很有效,但是如果遇到有窗体元素时这种方式常常显得无能为力,今天我们就一块看一下如何有效的解决这个问题。 网页...
  • zxwangyun
  • zxwangyun
  • 2015年03月26日 13:22
  • 703

动态改变div的z-index属性

动态改变div的z-index属性的简单实例。 复制代码代码如下:   var MAX_INDEX=4;  function change(ddd)  {  if(ddd.styl...
  • jbxue123
  • jbxue123
  • 2014年01月05日 09:11
  • 741
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:z-index属性
举报原因:
原因补充:

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