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

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

这些文字是对上篇文章的一点补充,没有什么需要特别说明的,只是把一些“概念常识”整理一下。

仍然先做一个和上篇文章中纸牌式的效果或仍沿用那个效果:

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

CSS部分:

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

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">dy1</div>
<div class="dy2">dy2</div>
<div class="dy3">dy3</div>
</body>
</html>

我们试着把里面的zIndex都去掉,然后看效果,发现和之前的是一模一样的,那这意思是不是说zIndex是无意义的?这个一会再说。

CSS:

.dy1 { top: 100px; left: 100px; background-color: #000; }
.dy2 { top: 130px; left: 120px; background-color: #f00; }
.dy3 { top: 160px; left: 140px; background-color: #050; }

首先来看为什么不写zIndex也会有相同的效果。是不是在不写情况下,它们本身也具有了一个缺省的zIndex值,这个值是多少呢?

问题二:zIndex是否无存在意义?

问题三:每个元素是否都有一个zIndex初始值?这个值是多少?

要判断是否真如上面所猜,其实非常简单:

首先,给dy2加上zIndex,值任意,不过为了节省点时间,可以取小点,就1吧。

.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 1; }

刷新,效果如上图,dy2已经覆盖在dy1和dy3之上了,这说明dy1和dy3的zIndex小于1,从而也回答了第二个问题,zIndex的存在并非无意义。但即使这样,我们仍然不知道它们的zIndex值是多少。再更改dy2的zIndex为0,发现又恢复了刚开始时的效果。

.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 0; }

这是不是说明刚开始的时候dy2的zIndex值就为0呢?不急,再等等。更改dy2的zIndex值得为-1。

dy2 { top: 130px; left: 120px; background-color: #f00; z-index: -1; }

IE:FF:

此时IE中dy2已经跑到dy1和dy3的下面去了,FF中dy2则消失不见,但依然可以看出绝对是在dy1和dy3之下,因为dy1和dy3之间没有任何东西阻隔。

得出的结果是:-1<zIndex(dy2)缺省值<1,由此可见dy2的zIndex确实有个缺省值,而且这个是值就是0。因为zIndex的值为正负整数,而整数只有0才会比-1大且比1小。

这时又有一个问题:dy1,dy3的zIndex缺省值又为多少呢?从前面的测试里可以知道:当dy2的zIndex为1时,dy1,dy3都在dy2之下,由此可见zIndex(dy1)缺省值<1,zIndex(dy3)缺省值<1;当dy2的zIndex为-1时,dy1,dy3都在dy2之上,所以zIndex(dy1)缺省值>-1,zIndex(dy3)缺省值>-1;显而易见,zIndex(dy1)和zIndex(dy3)的缺省值居然也为0,也就是说zIndex(dy1)=zIndex(dy2)=zIndex(dy3)=0,这是怎么回事?既然都为0,为什么还会有层叠效果?

既然是这样,我们直接都给dy1,dy2,dy3加上一个z-index:0;

.dy1 { top: 100px; left: 100px; background-color: #000; z-index: 0;}
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 0;}
.dy3 { top: 160px; left: 140px; background-color: #050; z-index: 0;}

果然,判断没有错,效果是一样的。那这是不是又说明,只要给它们的zIndex都赋一个相同的值,就会产生和zIndex顺次增大同样的效果?为了让结论更具说服力,需多测试几次:于是把它们的zIndex值都改为1,刷新,效果相同;改为2,刷新,效果相同;改为100,刷新,效果还是一样。

由此可见,如果我们要求一层要覆盖另一层时,只要不设置zIndex,默认的是会后面写的层盖在前写的层上,且所有的元素在无外在作用情况下,其zIndex初始值都为0

 

模式识别(二):分类问题简介

根据上一节的知识,不难看出,模式识别的核心任务是——分类。 这一节我们通过一个识别动物种类的简单例子,说明一下分类的基本类别和方法。 一般地,分类问题可以分为两类和多类两种,如下图所示: 有人可能...
  • longyindiyi
  • longyindiyi
  • 2014年02月28日 10:27
  • 5296

深刻解析position属性以及与层(z-index)的关系

[原创]深刻解析position属性以及与层(z-index)的关系   2010-09-15 09:13:15|  分类: Web编程 |  标签:css  position  relativ...
  • limlimlim
  • limlimlim
  • 2014年06月03日 15:21
  • 3204

数值优化(Numerical Optimization)学习系列-最小二乘问题(Least-Squares)

概述 最小二乘问题在实际应用中非常广泛,也是无约束最优化问题的重要应用之一,但是对于该问题还有一些特殊的求解思路,供参考。该小结主要介绍: 问题定义 线性最小二乘问题以及求解 ...
  • fangqingan_java
  • fangqingan_java
  • 2015年12月27日 18:52
  • 1896

回归--线性最小二乘问题

线性最小二乘的求解
  • wxcdzhangping
  • wxcdzhangping
  • 2014年04月11日 17:12
  • 2016

二分类问题特征选择的常用两个方法

二分类问题特征选择的常用两个方法                  2014-6-25   (1)互信息。值越大,相关性越强   w是特征,t是目标。反应的是特征出现和不出现对目标值的影响。...
  • hero_fantao
  • hero_fantao
  • 2014年06月25日 22:04
  • 2920

z-index不起作用的大坑

话说好久就没有更新博客了,今天为了装一把,差点没把自己装进去。。。以后还是低调一点好,哈哈,话不多说,直奔主题。 今天遇到的就是z-index不起作用的问题。一个后台小哥不知道抽什么疯,写元素覆盖偏...
  • apple_01150525
  • apple_01150525
  • 2017年08月01日 17:16
  • 891

我是一个线程

一个线程的生活自述
  • nylx
  • nylx
  • 2016年04月08日 15:06
  • 4171

利用Levenberg_Marquardt算法求解无约束的非线性最小二乘问题~

早就想写这篇文章,但是一直没抽出空,主要是画图比较麻烦,嘿嘿~ 现在介绍如何利用经典的Levenberg_Marquardt算法求解无约束的非线性最小二乘问题。Levenberg_Marquardt算...
  • wsj998689aa
  • wsj998689aa
  • 2014年11月05日 17:19
  • 3528

通过点击事件,把被叠住的View顶部(类似z-index)

一、布局文件相关定义
  • zzx_zzx_
  • zzx_zzx_
  • 2014年02月02日 14:55
  • 2090

LM算法与非线性最小二乘问题

摘录的一篇有关求解非线性最小二乘问题的算法--LM算法的文章,当中也加入了一些我个人在求解高精度最小二乘问题时候的一些感触: LM算法,全称为Levenberg-Marquard算法,它可用于解决非...
  • zbc1090549839
  • zbc1090549839
  • 2015年09月20日 11:23
  • 5476
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:zIndex的几个小小的问题(二)
举报原因:
原因补充:

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