用 z-index 设置元素的堆叠顺序

beyes · 发表于 2015-12-22 23:03:49

CSS 的元素是可以堆叠的，比如像下面这个效果：

改一下代码，又能上绿块堆在黄块上头：

像叠罗汉一样，决定是我压你，还是你压我，看 z-index 的属性值，值大的，在上头；反之在下头。需要注意的是，z-index 只能在定位元素（position）上有效。

这里说明一下为什么叫 z-index 。一般情况下，屏幕的二维平面用 X 轴和 Y 轴来衡量，但是显示立体堆叠的效果时，又得引用一个 Z 轴来表示。Z 轴定义为垂直延伸到显示区的轴。正数时，离用户近；负数时，离用户远。

对于上面的第 1 个图，代码表示如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Position</title>
<style>
.groad { background-color:#97D0F9 }
.groad span {font-size:22px; color:#fff }
.forum { background-color:#A8F3BC; height:80px; position:absolute; top:100px; z-index:1 }
.css { background-color:#F3F8C1; height:100px; width:300px; position:absolute; z-index:2}
.css span { color:blue; position:relative; top:30px; left:50px; }
</style>
</head>
<body>
<div class="groad">[url]www.groad.net[/url] <span>技术论坛</span></div>
<div class="css"><span>曲径通幽 CSS 版块</span></div>
<div class="forum">曲径通幽</div>
</body>
</html>

复制代码

对于第 2 个图，只要将 forum 里的 z-index:1 改为 z-index:3 就能看到效果。

		自动登录	找回密码
密码			立即注册

[CSS] 用 z-index 设置元素的堆叠顺序

本帖子中包含更多资源

相关帖子