引用 网页层叠z-index用法详解（转载）
2017-11-03 09:00
197 查看
引用
hacker0825 的 网页层叠z-index用法详解（转载）
最近在做定义元素顺序的时候，用到z-index属性，中间出了点小插曲，所以整理了一些资料给大家分享。希望对z-index属性和用法还不太了解的朋友有一定的帮助。
z-index定义：
名称：z-index
分类：定位
简述：设置对象的层叠顺序
概述：z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。
它是一组css定位元素中的一元，要配合position使用．
可能的值
值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
提示和注释
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
z-index属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序（stack order）。
每一个定位元素都归属于一个stacking context。根元素形成root stacking context，而其他的stacking context则由定位元素产生（此定位元素的z-index被定义一个非auto的z-index值），定位子元素会以这个local stacking context为参考，用相同的规则来决定层叠顺序。并且stacking context和 containing block 之间并没有必然联系。
当stacking context一样的时候，就用z-index的值来决定怎样显示，如果z-index也相同（即stack level相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。
当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的stacking context下才会用z-index来决定先后，不同时则由stacking context的z-index来决定。例如：
定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100。
实例
本例改变元素的堆叠顺序：
<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>
hacker0825 的 网页层叠z-index用法详解（转载）
最近在做定义元素顺序的时候，用到z-index属性，中间出了点小插曲，所以整理了一些资料给大家分享。希望对z-index属性和用法还不太了解的朋友有一定的帮助。
z-index定义：
名称：z-index
分类：定位
简述：设置对象的层叠顺序
概述：z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。
它是一组css定位元素中的一元，要配合position使用．
可能的值
值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
提示和注释
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
z-index属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序（stack order）。
每一个定位元素都归属于一个stacking context。根元素形成root stacking context，而其他的stacking context则由定位元素产生（此定位元素的z-index被定义一个非auto的z-index值），定位子元素会以这个local stacking context为参考，用相同的规则来决定层叠顺序。并且stacking context和 containing block 之间并没有必然联系。
当stacking context一样的时候，就用z-index的值来决定怎样显示，如果z-index也相同（即stack level相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。
当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的stacking context下才会用z-index来决定先后，不同时则由stacking context的z-index来决定。例如：
定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100。
实例
本例改变元素的堆叠顺序：
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 网页层叠z-index用法详解
- 网页层叠z-index用法详解
- 详解CSS中的z-index属性在层叠布局中的用法
- [转载] C++ typedef 用法详解
- 【转载】const用法详解，如何修饰变量，返回值以及成员函数
- struts2中s:iterator 标签的使用详解 及 OGNL用法 （转载）
- string里的IndexOf、LastIndexOf、Substring的详解（意义和用法）
- C++ 中引用（&）的用法和应用实例 （转载）
- php引用(&)变量引用，函数引用，对象引用和参数引用用法详解
- SPRING MVC 中的 MULTIACTIONCONTROLLER 用法详解 (转载)
- C语言const用法详解（三）(转载)
- c++值传递 指针传递 引用传递详解（转载）
- xargs用法详解(转载)
- string里的IndexOf、LastIndexOf、Substring的详解（意义和用法）
- （转载） STL中map用法详解
- (转载)#pragma pack 用法详解
- 【转载】-java Socket用法详解
- 转载 SVN中trunk,branches,tags用法详解
- 以太坊客户端Geth命令用法-参数详解【转载】
- 高性能网页开发新20条规则详解--转载