http://www.w3school.com.cn/jsref/prop_style_zindex.asp

zIndex 属性设置元素的堆叠顺序。

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

语法：

Object.style.zIndex=auto|number

可能的值

值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。

提示和注释

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

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

实例

本例改变元素的堆叠顺序：

<html>

<head>

<style type="text/css">

#img1

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

</style>

<script type="text/javascript">

function changeStackOrder()

{

document.getElementById("img1").style.zIndex="1";

}

</script>

</head>

<body>

<h1>This is a Heading</h1>

<img id="img1" src="bulbon.gif" width="100" height="180">

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

<input type="button" onclick="changeStackOrder()"

value="Change stack order" />

</body>

</html>

zIndex 属性设置元素的堆叠顺序。的更多相关文章

  1. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  2. 使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

    Ø  默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这时就需要使用 box-sizing 属性设置该元素. Ø  box-sizing 是 CSS3 的属性,可以 ...

  3. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. CSS z-index 属性

    定义和用法 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注释:元素可拥有负的 z-index 属性值. 注释:Z-index 仅能在定位元素上奏 ...

  6. (一)学习CSS之z-index属性

    参考:http://www.w3school.com.cn/cssref/pr_pos_z-index.asp z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元 ...

  7. css中z-index属性（标签层叠次序）

    定义和用法 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注释:元素可拥有负的 z-index 属性值. 注释:Z-index 仅能在定位元素上奏 ...

  8. 【CSS学习】--- z-index属性

    一.前言 网页显示实际上是三维的,我们直观看到的有x轴和y轴,但在网页布局上还有一个z轴. 对于定位元素,我们使用top.right.left.bottom来实现元素在x-y平面上的定位,但为了表示布 ...

  9. CSS z-index 属性的使用方法和层级树的概念

    之前有一篇文章提到过z-index,我们知道只有在元素设置了position部位static时才生效,而且z-index也跟父元素有关系,今天就在ie7遇到类似问题,在网上查了一些资料,发现一篇好文章 ...

随机推荐

  1. 微信开发之c#下jssdk签名生成

    参考文章 :微信JS-SDK 权限签名算法 C#版 这篇文章讲解的的比较详细,而且算法准确,但是这篇文章有几个错误的地方需要注意; url必须动态生成 url不能写死,否则就算结果和官方检测的一致,也 ...

  2. SQLlite 分页

    如果我要去11-20的Account表的数据 Select * From Account Limit 9 Offset 10; 以上语句表示从Account表获取数据,跳过10行,取9行 嗯,我觉得这 ...

  3. select2 模糊查询远程数据

    详细:http://www.cnblogs.com/linJie1930906722/p/6060370.html $("#name").select2({ language: & ...

  4. centos6.3 配置 smb 服务

    1.安装 samba 以及相关依赖包:yum install samba samba-client samba-swat 2.添加 smb 服务用户:smbpasswd -a user_name(之后 ...

  5. 性能测试—JMeter 常用元件（二）

    性能测试—JMeter 常用元件(二) <零成本web性能测试>第三章 Web性能测试脚本录制与开发中JMeter常用测试元件 测试计划描述了JMeter运行时将会执行的一系列步骤,一个完 ...

  6. 北航软院2012级C#期末考试部分考题解答

    博主注:本渣渣水平有限,文中若有不对的地方敬请指出,谢谢. 本文中大部分图片来自老师的PPT,感谢邵老师,想要的可以点击右边QQ联系我:) 一.选择题(2*15=30) 1.In C# what is ...

  7. The model backing the 'XXX' context has changed 错误

    https://blog.csdn.net/hit_why/article/details/72778785 https://blog.csdn.net/hit_why/article/details ...

  8. 修改testng源码，添加beforeMethod和afterMethod中的日志到test中（可以不改源码，废弃）

    在使用testng生成报告的时候,只会记录test方法中的日志,但是一般会在beforeMethod.beforeTest.afterMethod.afterTest中做一下数据的处理,这里面的日志没 ...

  9. 进阶篇：4.3）DFA设计指南：防错设计（ 防呆设计）

    本章目的:每一个装配步骤都有设计防错. 1.前言 关于防错设计,作者有想说的话: 1)防错设计是DFA重要的一条.因为太过重要,作者单独开一分章写! 2)只有理解了设计防错的重要,才会去设计防错特征. ...

  10. Python中的range和xrange区别

    range 函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. range示例: >>> r ...