有趣的z-index

yiminghe

浏览: 1453315 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

xhtml / css

CSS HTML Firefox XHTML 浏览器

实践：

注：firefox

示例1：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>有趣的z-index</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
div {
	width:300px;
	height:300px;
	position:relative;
}
#d1 {
	background:yellow;
}
#d2 {
	background:red;
	top:-310px;
}
#d1 p{
	position:relative;
	z-index:2;
}

</style>
</head>
<body>
	<div id="d1">
		<p>元素1</p>
		</div>
		
		<div id="d2">
			<p>元素2</p>
			</div>
	</body>
</html>

效果：

示例2：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>有趣的z-index</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
div {
	width:300px;
	height:300px;
	position:relative;
}
#d1 {
	background:yellow;
}
#d2 {
	background:red;
	top:-310px;
}
#d1 p{
	position:relative;
	z-index:2;
}

/*就在这有点东西！*/
#d1 {
	z-index:0;
}
</style>
</head>
<body>
	<div id="d1">
		<p>元素1</p>
		</div>
		
		<div id="d2">
			<p>元素2</p>
			</div>
	</body>
</html>

效果：

理论：

不懂得话引点权威指南的东西看看：

一旦为一个元素指定了 z-index 值（不是 auto），该元素就会建立自己的局部叠放上下文，这意味着，元素的所有后代相对于该祖先元素都有其自己的叠放顺序。这非常类似于元素建立新包含快的方式。

z-index 默认值 auto 说明：当前叠放上下文中生成框的栈层次与其父框的层次相同。这个框不会建立新的局部叠放上下文，因此如果元素设置为：z-index:auto; 可以将其处理为 z-index:0;

查看图片附件

1
顶

1
踩

分享到：

基于cloneNode的组件模版思想 | css列布局整理

2009-12-01 00:25
浏览 2834
评论(5)
分类:Web前端
查看更多

5 楼 goddy128 2009-12-01

yiminghe 写道

以前确实很少琢磨z－index这个属性，看看指南

还有几点：
1。z-index 只有在绝对以及相对定位时才起作用
2。默认z-index :auto ;等同于 z-index:0;但又不完全一样（没有建立栈上下文）
3。同级元素相等z－index，后面的覆盖前面的

的确指南这本书真的很不错,可惜我也没有详细拜读过,只是需要的时候去查阅下而已.找时间要去仔细琢磨一下~.
你这次去参加杭州的D2会议么?

4 楼 yiminghe 2009-12-01

3 楼 goddy128 2009-12-01

yiminghe 写道

这里重点不是父子关系哦，两段代码除了

#d1 {  
     z-index:0;  
 }

都一样的

恩，关键就在这里，因为p1属于d1，由于第二个example的d1有个z－index，因此d1下面的字节点不管z－index多大都只能躺在d1上，不能游离出d1。

也就说浏览器在发现z－index的时候，是先去比较同一个level上的z－index，然后再去看下个level上的。比如下面的例子(数字代表该dom的z－index值)：

1
100
1000
2
1
0

这种情况下，那个拥有1000的z－index的那个元素也不可能躺在拥有2的元素的上面，谁让它的爷爷的z－index是1呢。

2 楼 yiminghe 2009-12-01

这里重点不是父子关系哦，两段代码除了

#d1 {  
     z-index:0;  
 }

都一样的

1 楼 goddy128 2009-12-01

其实就是个父子关系的问题～～～。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论