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. onbeforeunload事件

    window.onbeforeunload=function(){ return "您正在编辑的博客尚未保存,确定要离开此页吗?"; }; 1.这个事件存在的意义就是防止用户不小心 ...

  2. Re：从零开始的Spring Security Oauth2（二）

    本文开始从源码的层面,讲解一些Spring Security Oauth2的认证流程.本文较长,适合在空余时间段观看.且涉及了较多的源码,非关键性代码以…代替. 准备工作 首先开启debug信息: l ...

  3. border使用小技巧

    border-style 分类 dashed虚线类型 dotted 点线类型 double 双线类型 双线型量根实线的宽度和中间空白区域的间距有一定规律: 可以利用这个规律画出一些特殊的图案 代码如下 ...

  4. 4.Python的版本

    Python2: 英文支持没问题,中文报错,默认编码:ascii码 显示中午需要添加代码在首行:# -*- encoding:utf -8 -*- 用户交互  raw_input python2 里还 ...

  5. 数数（高维DP）

    T1 数数 [问题描述] fadbec 很善于数数,⽐如他会数将 a 个红球,b 个黄球,c 个蓝球,d 个绿球排成⼀列,任意相邻不同⾊的数⽬. 现在 R 君不知道 fadbec 数的对不对,想让你也 ...

  6. leetcode 2 两数相加 JAVA

    题目: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示 ...

  7. leecode刷题（13） -- 字符串中的第一个唯一字符

    leecode刷题(13) -- 字符串中的第一个唯一字符 字符串中的第一个唯一字符 描述: 给定一个字符串,找到它的第一个不重复的字符,并返回它的索引.如果不存在,则返回 -1. 案例: s = & ...

  8. acedSSGet使用自定义提示字符:$模式

          ads_name ss; struct resbuf *pRbList=NULL; pRbList=acutBuildList(RTDXF0,_T("lwpolyline,ins ...

  9. 获取dataGridView双击时判断双击的是下面的行，还是列头

    private void dataGridView1_DoubleClick(object sender, EventArgs e) { Point hit = this.dataGridView1. ...

  10. TX2 五种功耗模式

    工作模式介绍 Jetson TX2由一个GPU和一个CPU集群组成,CPU集群由双核丹佛2处理器和四核ARM Cortex-A57组成,通过高性能互连架构连接. 拥有6个CPU核心和一个GPU,您可以 ...