有趣的z-index

最新推荐文章于 2025-03-10 21:21:10 发布

最新推荐文章于 2025-03-10 21:21:10 发布 · 137 阅读

文章标签：

#CSS #HTML #Firefox #XHTML #浏览器

xhtml / css 专栏收录该内容

47 篇文章

订阅专栏

本文通过两个实例详细解析了CSS中z-index属性的工作原理及其对页面元素堆叠顺序的影响。介绍了如何使用z-index创建局部堆叠上下文，并解释了默认值auto的实际含义。

实践：

注：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>

效果：