关闭

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

1436人阅读 评论(0) 收藏 举报

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部分:

<!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">zindex1</div>
<div class="dy2">zindex2
 <div class="dy2-1">zindex100</div>
 <div class="dy2-2">zindex200</div>
</div>
<div class="dy3">zindex3</div>
</body>
</html>

输出效果:

演示地址:http://www.doyoe.com/model/xhtmlcss/style/zindex/2.htm

我们发现,zIndex值最大的dy2-2并没有在最外层,而是被zIndex值仅为3的dy3所遮盖。

由此可见,层叠顺序完全取决于zIndex的大小只是在一般情况下才成立,并不是适用于任何情况。从这个例子中,可以得出结论是dy2-1和dy2-2都遵循了其父层dy2的zIndex,而他们本身的zIndex值只在dy2内部起作用。

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48513次
    • 积分:1003
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接