全透视：CSS Z-index 属性（5）
作者：竹馥堂主 来源：osmn00.com 发布时间：2009-09-21 12:52:00
标签：css,z-index,层叠,属性
普遍应用的展示
对页面中的元素应用z-index属性可以非常便捷的解决各种各样的layout挑战，同时使得设计者可以在他们的设计中使用层叠的项目进行更多的创造。
交错的滑动门菜单
一个对这个CSS属性实际应用的案例：CTCOnlineCME这个网站对“正被点击”的tab使用Z-index属性及清晰交错的PNG图片，创造出非常好的效果。
CSS 气泡
Z-index 属性还可以用来实现基于CSS的提示气泡，就像下面trentrichardson.com展示的那样
Light Box
如果不是因为应用了z-index 属性，现在也不会有那么多的品质优秀的Light Box脚本可以免费使用，比如说JQuery的一个插件FancyBox。
Light box 脚本使用半透明的PNG图片来使背景变暗，之后拿来一个新的元素，经常会使用类似窗口的DIV，将之放置在前排。覆盖住屏幕的PNG和之后的DIV都使用Z-index 属性以确保这2个元素会位于页面其他元素之上。
0
投稿猜你喜欢
背景最近正在学nodejs,想到曾经有台云服务器，但是很久不用了，由于怕麻烦，一股脑的把云主机重装了个Ubuntu系统，于是配置MySQL成- 原来的语句是这样的： select sum(sl0000) from xstfxps2 where dhao00 in ( select d
- 背景最近在用Electron开发一款应用，其中有涉及到检测因特网是否断开的需求。Electron基于Chromium和Node.js，让你可
- 设置密码保护SqlServer数据库备份文件！ 备份SqlServer数据库 Backup Database [数据库] To disk=&
- 使用django启动命令行和脚本，可以方便的使用django框架做开发，例如，数据库的操作等。下面分别介绍使用方法。django shell
- Elasticsearch查询查询分类：基本查询：使用es内置查询条件进行查询组合查询：把多个查询组合在一起进行复合查询过滤：查询的同时，通
- 如下所示：# coding=utf-8import osimport os.pathimport reimport arrayimport
- 本文实例讲述了Python yield的用法。分享给大家供大家参考，具体如下：yield的英文单词意思是生产，刚接触Python的时候感到非
- 分析我们将添加、插入、删除定义为：添加 : 在字符串的后面或者前面添加字符或者字符串插入 : 在字符串之间插入特定字符在Python中，字符
- 本文实例讲述了python条件变量之生产者与消费者操作。分享给大家供大家参考，具体如下：互斥锁是最简单的线程同步机制，面对复杂线程同步问题，
- //问题比如：7*0.8 JavaScript算出来就是：5.6000000000000005
- 本文实例为大家分享了js实现带积分的弹球小游戏的具体代码，供大家参考，具体内容如 * ：如果小球与底部方块的角碰撞，积分可能有些许bug<
- 工欲善其事，必先利其器。作为更专业的前端工程师，我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码，首先要作的就是对
- 1.命令介绍最近学习并使用了一个python的内置函数dir，首先help一下：>>> help(dir)Help on
- 本文用python在TCP的基础上实现一个HTTP客户端, 该客户端能够复用TCP连接, 使用HTTP1.1协议. 一. 创建HT
- 本文介绍了python opencv之SIFT算法示例，分享给大家，具体如下：目标：学习SIFT算法的概念 学习在图像中查找SIFT关键的和
- mysql explain命令用于显示mysql如何使用索引来处理select语句以及连接表。通过该命令可以分析出查询语句或是表结构的性能瓶
- 一，什么是JSON文件JSON和XML都是互联网上数据交换的主要载体。在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本
- 代码如下： function HandleTabKey(evt) {
- 前言在前面的分享中，我们制作了一个天眼查 GUI 程序，今天我们在这个的基础上，继续开发新的功能，微博抓取工具，先来看下最终的效果整体的界面
