zIndex的几个小小的问题(一)

最新推荐文章于 2024-08-20 14:57:54 发布

飘零雾雨

最新推荐文章于 2024-08-20 14:57:54 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： xhtml class div css html border

本文链接：https://blog.youkuaiyun.com/storm0/article/details/1805934

CSS 专栏收录该内容

43 篇文章

订阅专栏

本文通过实例展示了CSS中zIndex属性的层叠特性，解释了不同层级元素间如何正确设置zIndex值以达到预期的层叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

zIndex在实际应用中很是实用。不过也有些问题需要注意，很容易把头都搞大。

当然，其实说什么都是没用滴，先用zIndex做个效果看看再说，首先得知道它都可以胜任哪些东东，这是比较重要的。

比如要做一个下面的扑克牌堆叠的效果，这是非常简单的。扑克牌图片网上随便找就可以了，或者直接拿下面的这几张。

效果如下图：

［演示地址：http://www.doyoe.com/model/xhtmlcss/style/zindex/1.htm］

CSS部分：

div { position:absolute; color:#f00;}
.dy1 { z-index:1; top:100px; left:100px;}
.dy2 { z-index:2; top:140px; left:125px;}
.dy3 { z-index:3; top:180px; left:150px;}
.dy4 { z-index:4; top:220px; left:175px;}
.dy5 { z-index:5; top:260px; left:200px;}
img { float:left; margin-right:20px;}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY Css zIndex</title>
</head>
<body>
<div class="dy1"><img src="skin/1.jpg" alt="1" title="1" />← zindex1</div>
<div class="dy2"><img src="skin/2.jpg" alt="2" title="2" />← zindex2</div>
<div class="dy3"><img src="skin/3.jpg" alt="3" title="3" />← zindex3</div>
<div class="dy4"><img src="skin/4.jpg" alt="4" title="4" />← zindex4</div>
<div class="dy5"><img src="skin/5.jpg" alt="5" title="5" />← zindex5</div>
</body>
</html>

要注意的是，zIndex要生效就必须要使用position定位，关于这点可以参阅CSS手则对position几个参数的说明。

从上面的效果图可以看出，几张牌的层叠顺序，是由zIndex值来决定。zIndex的值越大，则叠在越外面。

问题一：zIndex的主从属性是怎样的？

比如说有几个同级的块dy1，dy2，dy3，它们的zIndex值分别是1，2，3，所以dy1<dy2<dy3，dy3在最外层。

这时块dy2中包含有另外两个子块dy2-1，dy2-2，它们的zIndex分别是100，200。

按照一惯的思维，容易理解成块的层叠顺序完全取决于zIndex的大小，所以是dy1<dy2<dy3<dy2-1<dy2-2，dy2-2在所有块的最外层。但结果真是这样的吗？我们不妨来写个例子验证一下。

首先我们要构造一个和上面所述情况一个环境：

CSS部分：

div {border:1px solid #ddd;position:absolute;color:#fff;}
.dy1,.dy2,.dy3 {width:150px;height:150px;}
.dy2-1,.dy2-2 {width:130px;height:50px;}
.dy1 {top:100px;left:100px;background-color:#000;z-index:1;}
.dy2 {top:130px;left:140px;background-color:#f00;z-index:2;}
.dy3 {top:160px;left:240px;background-color:#050;z-index:3;}
.dy2-1 {top:20px;left:10px;background-color:#aaa;z-index:100;}
.dy2-2 {top:50px;left:20px;background-color:#630;z-index:200;}

XHTML部分：