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# usb设备的自动退出

    using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...

  2. 写一个Singleton出来。

    单例模式是一种创建模式. 这种模式只涉及一个单独的类,它负责创建自己的对象. 该类确保只创建单个对象. 这个类提供了一种访问其唯一对象的方法. 例子: MainWindow类的构造函数是私有的,并且有 ...

  3. python学习之路 八 ：面向对象编程基础

    本节重点 了解面向对象.面向过程的区别 掌握什么是类,什么是对象 掌握如何定义及使用类和对象 了解类与对象间的关系 掌握类属性和实例属性 掌握绑定方法 一.编程范式 ​    ​编程即写程序or写代码 ...

  4. C++的可移植性和跨平台开发

    概述 今天聊聊C++的可移植性问题.如果你平时使用C++进行开发,并且你对C++的可移植性问题不是非常清楚,那么我建议你看看这个系列.即使你目前没有跨平台开发的需要,了解可移植性方面的知识对你还是很有 ...

  5. LoadRunner12_脚本中运行JavaScript

    版权声明:本文为博主原创文章,未经博主允许不得转载. [系统及软件配置] LR版本:12.53 JDK版本:1.8 函数:web_js_run,该函数仅在LR12版本提供支持,LR11不支持JavaS ...

  6. 不用split调转字符串

  7. UIScreen和UIWindow

    UIScreen 和UIWindow UIScreen object defines the properties associated with a hardware-based display 就 ...

  8. 如何解决 “invalid resource directory name”, resource “crunch”

    Ant and the ADT Plugin for Eclipse are packing the .apk file in a different build chain and temp gen ...

  9. Hibernate 自动创建表bug问题解决

    我在hibernate.cfg.xml配置文件中添加了自动创建表的的属性:(这样当数据库中没有此表是,hibernate就会自动帮我们创建一张表) <property name="hb ...

  10. tomcat 搭建以及发布配置

    身为开发人员, 一直干着开发的事情, 只干开发的事情, 却缺少了对于环境部署方面的必备技能的培养, 所以在公司安排的手头任务解决完的情况下, 自己抽空了解并且实践了一下tomcat的配置.写下通过网络 ...