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

 

项目中弹出页面的显示层次问题 CSS中z-index属性

1.CSS z-index 属性 定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素可拥有负的 z-index 属性值...
  • u014746965
  • u014746965
  • 2015年12月24日 10:18
  • 2097

微信小程序 canvas控件与html中canvas的不同

在微信小程序中也拥有和html中作用相同的canvas控件在一次使用过程中 需要在绘制的图上显示文字 但出现了问题使用以下两种结构 绘图始终会盖在文字上层 canvas及view均设置了...
  • u014294325
  • u014294325
  • 2017年01月13日 11:33
  • 2238

什么是动态规划算法,常见的动态规划问题分析与求解

理解动态规划 动态规划中递推式的求解方法不是动态规划的本质。 我曾经作为省队成员参加过NOI,保送之后也给学校参加NOIP的同学多次讲过动态规划,我试着讲一下我理解的动态规划,争取深入浅出。希望你看...
  • txl16211
  • txl16211
  • 2015年04月27日 23:09
  • 3095

关于zIndex的问题

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

关于win7无法进入睡眠状态问题解决办法的小小汇总

  • 2011年08月28日 20:33
  • 2KB
  • 下载

关于Android线性布局的一个小小的问题

线性布局用的十分普遍,和相对布局比较,可以减小很大代码量。其中Layout_gravity也是用的比较多的属性。 现有如下项目需求: 实现一个横向的线性布局,里面有两个子空间,一个...
  • leirenbaobao
  • leirenbaobao
  • 2014年12月14日 16:02
  • 559

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

首先,为了说话方便,列出一些术语: 在启发式搜索中,对于每个状态 x,启发函数 f(x) 通常是这样的形式: f(x) = g(x) + h(x) 其中 ...
  • luo964061873
  • luo964061873
  • 2012年09月05日 15:16
  • 2621

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

昨晚也就是11月的最后一个晚上,突然意外看到docker,感觉这货还不错,于是就搞了一波,但是很多人好人多都是在ubuntu下搞的,而且内核版本也符合的docker的配置环境要求,直接无脑的apt-g...
  • lotluck
  • lotluck
  • 2015年12月03日 14:37
  • 678

竟然有一些小小的访问量,真的是很惊喜。兼容性的问题,贴出来

兼容性问题 目前市面上流行的浏览器有多种,这些浏览器在处理一个相同的页面时,表现或行为有时会有差异。 这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。 ...
  • a_water_drop
  • a_water_drop
  • 2015年03月17日 10:55
  • 230

poj 1704 小小的博弈问题

题目大意:在一个正整数数轴上,放着一些棋子,两人博弈,   每个人可以选取任意一个棋子,把它往左(与正方向相反)移动若干步,条件是移动过程中不能够经过另一些棋子。    问先手的必胜必败态; ...
  • cjoilmd
  • cjoilmd
  • 2011年08月19日 19:53
  • 438
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:zIndex的几个小小的问题(一)
举报原因:
原因补充:

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