引用 网页层叠z-index用法详解(转载)
来源:互联网 发布:eia数据公布 编辑:程序博客网 时间:2024/06/05 00:23
引用
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用法详解
- z-index 层叠顺序
- 层叠上下文 z-index
- 我理解的z-index,层叠上下文,层叠顺序(DOM结构上)
- CSS的z-index属性用法详解
- css中的z-index用法详解
- falsh z-index不能控制层叠方式
- Flash的层叠顺序问题(z-index)
- Flash的层叠顺序问题(z-index)
- 依赖z-index值创建层叠上下文
- css z-index 属性实现层叠效果
- z-index出发讨论层叠问题
- CSS层叠上下文以及z-index
- z-index 的用法
- z-index 用法
- z-index用法总结
- z-index的用法
- adbunknown Host service问题修复
- IDC说阿里云又涨了丨专家称信息保护对区块链技术需求巨大丨联想亏惨了,净利润同比下滑80%【软件网每日新闻播报│第11-2期】
- 携AI+安防双基因,博思廷如何推动智能安防产业发展?
- 集合框架
- https://www.5ceo.cn/generator/index.htm [5CEO.cn-代码生成工具,在线快速生成java代码,springmvc框架]
- 引用 网页层叠z-index用法详解(转载)
- mybatis 的一级缓存和二级缓存
- 20171102--NPM的介绍和使用
- Java多线程编程-(18)-等待/通知模式接口Condition接口深入分析
- Ubuntu16.04更新4.13.8内核.md
- Java中四种引用类型
- JAVA 注解
- 自连接
- jsp中${name}这个怎么用的?