全透视：CSS Z-index 属性（3）
作者：竹馥堂主 来源：osmn00.com 发布时间：2009-09-21 12:52:00
为什么它会产生混乱？
即时Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。
为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。
灰色的BOX具有“9999”的Z-index值，蓝色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎逻辑的，你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定position属性。
下面是同样的三个BOX，分别都被设置了position: relative，他们的Z-index值还是按照上面那段设定。
现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的BOX覆盖在蓝色之上，蓝色的覆盖在金色之上。
语法
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 9999;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 500;
}
#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
z-index: 1;
}
重复一下，Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视，尤其是对于那些新手。
0
投稿猜你喜欢
在应用程序的开发中，有些输入信息是动态的，比如我们要注册一个员工的工作经历，比如下图如果做成死的，只能填写三个，如果是四个呢？或者更多呢，那- 作为胶水语言，Python可以很方便的执行系统命令，Python3中常用的执行操作系统命令有os.system()、os.popen()、s
- pandas创建series方法print("====创建series方法一===")dic={"a"
- 最近 W3C 一口气推出 7 个 HTML 工作草案，涵盖了 HTML5，HTML RDF，HTML Microdata，HTM
- 代码如下:<％ str = request("str") reg
- turtle的文档：https://docs.python.org/3/library/turtle.html用Python的turtle库
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下： mysql -
- 用python操作ms sqlserver，有好几种方法：（1）利用pymssql （2）利用pyodbc这里讲import&nb
- Tkinter复选框Checkbutton是否被选中判断定义一个BooleanVar型数据进行获取复选框状态。>>> im
- <script>function getJsFile(url, callBack){
- 本文实例为大家分享了vue实现计时器的具体代码，供大家参考，具体内容如下这里做的是点击按钮开始与结束倒计时的功能<div class=
- 正则表达式是一个特殊的字符序列，它能帮助你方便的检查一个字符串是否与某种模式匹配。Python 自1.5版本起增加了re 模块，它提供 Pe
- 一、PyTorch 检查模型梯度是否可导当我们构建复杂网络模型或在模型中加入复杂操作时，可能会需要验证该模型或操作是否可导，即模型是否能够优
- 分区表的概念 分区致力于解决支持极大表和索引的关键问题。它采用他们分解成较小和易于管理的称为分区的片(piece)的方法。一旦分区被定义，S
- 首先，我们在VSTS中创建一Database Project,增一个class, 实现下面的一个方法： /// <summary>
- Truncate是SQL中的一个删除数据表内容的语句，用法是：TRUNCATE TABLE [Table Name]。下面是对Truncat
- 一、技术背景损失函数是机器学习中直接决定训练结果好坏的一个模块，该函数用于定义计算出来的结果或者是神经网络给出的推测结论与正确结果的偏差程度
- 通过win32 COM接口实现软件的操作本质上来看跟直接操作软件一致，这跟我之前经常用的通过各种扩展的组件或者库实现各种文件的处理有较大的差
- 实例如下所示：import numpy as npimport pandas as pddata = {'city': [&
- 前言在自学机器学习或者是深度学习的过程中，有的时候总想把执行过程或者执行结果显示出来，所以就想到了动画。好在用 Python 实现动画有许多
