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. SQL命令行修改数据库

    增加列: alter table tableName add columnName varchar(30) 修改列类型:alter table tableName alter column colum ...

  2. c# winform实现同时只允许账号在一台电脑登录的功能

    公司有个小需求,要求账号不能同时登录在多台电脑上,就像那个微信或QQ一样,如果一台电脑登录了,原来登录的就自动退出了(网上搜索点单点登录,发现有些出入,人家是实现一次登录在多个系统间认证的) 找了些资 ...

  3. 度度熊想去商场买一顶帽子，商场里有N顶帽子，有些帽子的价格可能相同。度度熊想买一顶价格第三便宜的帽子，问第三便宜的帽子价格是多少？

    var data=[10,25,50,10,20,80,30,30,40,90]; function fun(arr,index){ var min=Math.min.apply(this,arr); ...

  4. TiDB和MongoDB分片集群架构比较

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 最近阅读了TiDB源码的说明文档,跟MongoDB的分片集群做了下简单对比. 首先展示TiDB的整体架构 M ...

  5. OI树上问题 简单学习笔记

    判断链 每个点的度数不超过2 判断树 n个点,n-1条边 每两个点之间的路径唯一 多叉树转换成二叉树 第一个孩子作为左孩子,第一个孩子的兄弟作为它的右孩子. 树的重心 树上一点,满足删除该点时,树内剩 ...

  6. OCP最新题库052考题解析及答案-第37题

    37.USER1 grants SELECT, INSERT, and UPDATE privileges on USER1. EMP to USER2. SYS executes this comm ...

  7. windows server2008 r2安装DNS服务器

    1.开始->管理工具->服务器管理器 2.角色->添加角色 3.服务器角色->DNS服务器 4.一直点击下一步,直至安装完成. (确认步骤时会提示,可能会需要重启服务器) 安装 ...

  8. CSS动态定位

    $(document).ready(function(){ $('body').on('click', '#start_timer', function() { var laydate = $(&qu ...

  9. [ActionScript 3.0] 实现放大镜效果的简单方法

    //mc和bgmc是同一对象的不同实例 //mc放大的对象 //bgmc源对象 //mag放大镜 var scale:Number = 1.3;//放大倍数 mc.mask = mag; mag.st ...

  10. ArchLinux 下 virtualbox 报错 libQtCore.so.4: cannot open shared object file

    VirtualBox: supR3HardenedMainGetTrustedMain: dlopen("/usr/lib/virtualbox/VirtualBox.so",) ...