层叠加的五条叠加法则
作者:14px 来源:蓝色理想 发布时间:2009-05-01 12:07:00
标签:层,叠加,css,元素
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]
貌似很多同学对为什么这个div在上层,那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终,致使不敢随意使用层的叠加。但层的叠加效果,在交互设计中却频频出现,所以我们必须驾驭它,要驾驭它,就要掌握其规律。
首先明确几点在文中所需要用到的概念:
静态定位:position:static(为position属性的默认值)。
动态定位:position:relative或position:absolute或position:fixed。
祖元素:任意包含该元素的元素。
父元素:直接包含该元素的祖元素。
同辈元素:拥有共同的父元素的元素。
注:这些概念为作者自定义,仅用于本文。
引用:
关于同辈元素是个非常关键的词,这里还需要详细解释一下。
<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="f">
<div></div>
<div id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>
在这个例子中,div#a与div#b并不是“同辈元素”,只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫“同辈元素”。
引用结束
接下来看看这五条法则:
法则一:同辈元素定位方式相同,且无z-index设置时,html靠后者居上。
运行代码框
0
投稿
猜你喜欢
- 因为要写个东西用到,所以百度了一下,居然有朋友乱写,而且比较多,都没有认真测试过,只对字符可以,但是对数字就不可以,而且通用性很差,需要修改
- 代码中经常会有变量是否为None的判断,有三种主要的写法:第一种是`if x is None`;第二种是 `if not x:`;第三种是`
- 1.定义ResNet残差模块一个block中,有两个卷积层,之后的输出还要和输入进行相加。因此一个block的前向流程如下:输入x→卷积层→
- 目的:python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式。总体思路:(1)要想实现对Excel数据的读取,需要用
- 一、根据条件在序列中筛选数据假设有一个数字列表 data, 过滤列表中的负数data = [1, 2, 3, 4, -5]# 使用列表推导式
- 关于数据库的逻辑设计,是一个很广泛的问题。本文主要针对开发应用中遇到在MS SQL Server上进行表设计时,对表的主键设计应注意的问题以
- 1.导入matplotlib.pylab和numpy包import matplotlib.pylab as pltimport numpy
- 这本是课程的一个作业研究搜索算法,当时研究了一下Tkinter,然后写了个很简单的机器人走迷宫的界面,并且使用了各种搜索算法来进行搜索,如下
- 以这个为例: yyyy-MM-dd HH:mm:ss首先得写好你需要的模板options.sign =
- 这篇文章主要介绍了python3 反射的四种基本方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 前言:又到每日分享Python小技巧的时光了,今天给大家分享的是Python接口常用封装函数。相信对于封装,大家都不陌生吧,今天就用四个小案
- 前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个
- 在封装自己的FileSystemObject库的时候,测试的时候发现在文件夹或文件很多的时候,效率很低,显示一个文件夹需要2秒甚至更多,这让
- 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字
- 最近做IM的时候遇到一个问题,同时用到了这三个关键字。就是查询一个人的离线消息详情,我们服务端返回给客户端显示的这个详情包括了三个内容,第一
- 使用python filecmp模块的dircmp类可以很方便的比对两个目录,dircmp的用法已经有很多文章介绍,不再赘述。可以help(
- 【pytorch官方文档】:https://pytorch.org/docs/stable/generated/torch.nn.AvgPo
- 做了一下mysql升级,开发机上mysql升级到5.6版本,结果连接一些低版本的mysql服务器报出如下异常:Warning: mysql_
- MySQL是一种常见的关系型数据库管理系统,常被用于各种应用程序中存储数据。当涉及到大量的数据时,数据库查询的性能就成了关键因素,这时就需要
- 用ASP.NET与SQL SERVER可是缘份最好了,稍大的程序一般第一先考虑的是SQL SERVER,只是一些很考虑经济的才使用ACCES