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

原创 2007年09月29日 09:34:00

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内部起作用。

 

相关文章推荐

关于zIndex的问题

大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-index属...

几个小小的小小小C程序

  • 2010年12月22日 22:53
  • 1KB
  • 下载

Connected to an idle instance问题的小小仇恨

博主刚开始用Linux装完oracle的时候,装了一整天,开心的不行,最后使用命令时出现了Connected to an idle instance这个问题,使用startup的时候居然出现错误,网上...

(ASP.NET)一些小小的问题集锦(2)

现又整理ASP.NET项目当中遇到的另一些问题: 1、前端若为非ASP.NET标准控件(即不是类型的),如何在.cs文件获取其数值? 解决方法:前端的控件加上name属性,.cs文件就可以通过Re...

(ASP.NET)一些小小的问题集锦(1)

在项目中遇到的一些问题和解决方法

遇到问题集锦(无c++基础 零起点小小小菜鸟亲身经历) 转自http://blog.csdn.net/qq592116366

收集的可能出现问题的解决方法方案

向Access数据库插入数据时遇见的小小问题

记得前一次用Access数据库已是多年前的事了,那时还在学校混日子。 这次,由于一个实验性的小项目,再次接触Access数据库(Access2007)。在使用Access数据库的过程中,遇见一个小小...
  • tiana0
  • tiana0
  • 2013年08月18日 11:39
  • 2552

对于 前K短路径问题 和 A*算法 的一些小小总结

对于 前K短路径问题 和 A*算法 的一些小小总结     首先,为了说话方便,列出一些术语:     在启发式搜索中,对于每个状态 x,启发函数 f(x) 通常是这样的形...

关于 centos下docker安装中遇到的问题 小小吐嘈一下下

昨晚也就是11月的最后一个晚上,突然意外看到docker,感觉这货还不错,于是就搞了一波,但是很多人好人多都是在ubuntu下搞的,而且内核版本也符合的docker的配置环境要求,直接无脑的apt-g...
  • lotluck
  • lotluck
  • 2015年12月03日 14:37
  • 642
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:zIndex的几个小小的问题(一)
举报原因:
原因补充:

(最多只允许输入30个字)