全透视：CSS Z-index 属性
作者：竹馥堂主 来源：osmn00.com 发布时间：2009-09-21 12:52:00
非常好的一篇技术文档，翻译自Louis Lazaris 2009年9月15日发表的《The Z-Index CSS Property: A Comprehensive Look》，相信会帮助很多像我一样的前端狂！
<———————————————- 分割线 ———————————————->
大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。
Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，你会发现它却是一个非常容易使用的属性，并且会为解决很多layout方面的挑战提供强有力的帮助。
在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异，那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全透视文章将会为那些有着良好基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。
这是什么？
Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。
三维手法展现的Z轴
为了更清晰的描述Z-index是如何工作的，上面的这张图片夸大展示了层叠元素在视觉位置上的关系。
0
投稿猜你喜欢
- 中文文本中可能出现的标点符号来源比较复杂，通过匹配等手段对他们处理的时候需要格外小心，防止遗漏。以下为在下处理中文标点的时候采用的两种方法:
需求来源好友 A：橡皮擦，可否提供网页，上传带人像的图片，然后可以直接抠图，最好直接生成 PNG 图片下载。 橡皮擦：每天需要调用多少次？- 通过亲密性原则，我们可以将一个页面中的元素按照某种逻辑理解上的差异划分成不同的元素组合；再通过对齐原则，使这些不同的元素组合在视觉上看起来彼
- 但是有时候，可以视看处进逻辑程度，可以把三者写成一个触发器，只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入，删除还是
- 近来在做数据库设计，有时候真弄不清SQL2000里的数据类型，所以摘了这篇文章。 (1)char、varchar、text和nchar、nv
- 前言Python多进程适用的场景：计算密集型（CPU密集型）任务Python多线程适用的场景：IO密集型任务计算密集型任务一般指需要做大量的
- 刚来公司的时候领导给分配的都是一些简单的简单的简单的。。。。。任务一次叫我把文章的字体大小变换功能写出来。在网上搜了很多都不管用！不过功夫不
- 本文实例讲述了python中for语句简单遍历数据的方法。分享给大家供大家参考。具体如下：for name in ["kak&qu
- 这两天在用python的bottle框架开发后台管理系统，接口约定使用RESTful风格请求，前端使用jquery ajax与接口进行交互，
- Python装饰器（decorator）在实现的时候，被装饰后的函数其实已经是另外一个函数了（函数名等函数属性会发生改变），为了不影响，Py
- 本文实例为大家分享了python抓取网页中链接的静态图片的具体代码，供大家参考，具体内容如下# -*- coding:utf-8 -*- #
- 自定义图片生成词云图的多种方法有时候我们会根据具体的场景来结合图片展示词云，比如我分析的是美团评论，那么最好的展示方法就是利用美团的logo
- 1、$nextTickvm.$nextTick( [callback] )this.$nextTick()将回调延迟到下次 DOM 更新循环
- 在网上找了找也没找到合适的最后自己测试用 存入：Replace("\r\n", "<br/>&qu
- 本文实例讲述了python用10行代码实现对 * 的检测功能。分享给大家供大家参考。具体如下：原理：将图片转换为YCbCr模式，在图片中寻
- 此代码适合你做网站用，普通朋友可以不用理这个东西！ASP:<％dim objXMLHTTP, qq, pwd qq = &
- 实现SQL Server 原生数据从XML生成JSON数据的实例代码 SQL Server 是关系数据库，查询结果通
- 本文实例讲述了jsp+ajax实现无刷新上传文件的方法。分享给大家供大家参考，具体如下：列表页：selectaddress.jspjs页：a
- 一、安装首先我们需要安装下pyecharts，通过pip指令直接安装即可。pip install pyecharts安装完成后， 可通过pi
- 前言vue.js的UI组件库，在git上有多个项目，我见的使用者比较多的是iView和Element.两个组件库，组件都很丰富。官网的介绍i
