全透视:CSS Z-index 属性(5)

作者:竹馥堂主 来源:osmn00.com 时间:2009-09-21 12:52:00 

普遍应用的展示

对页面中的元素应用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个元素会位于页面其他元素之上。

标签:css,z-index,层叠,属性
0
投稿

猜你喜欢

  • 讲解Python的Scrapy爬虫框架使用代理进行采集的方法

    2022-07-28 01:34:49
  • pyqt5的QWebEngineView 使用模板的方法

    2022-04-17 08:23:12
  • 浅谈Python的list中的选取范围

    2023-06-23 01:58:01
  • 通过python-turtle库实现绘制图画

    2023-11-23 17:39:35
  • 用python3 返回鼠标位置的实现方法(带界面)

    2021-07-17 15:11:40
  • MySQL数据库分组查询group by语句详解

    2024-01-28 05:50:31
  • Mysql5.7服务无法启动的图文解决教程

    2024-01-29 03:44:39
  • matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域

    2023-06-24 02:55:42
  • Go singleflight使用以及原理

    2024-04-27 15:31:09
  • Python 实现使用空值进行赋值 None

    2021-04-12 07:01:09
  • Python使用Rich type和TinyDB构建联系人通讯录

    2023-07-13 10:33:22
  • Python用requests-html爬取网页的实现

    2023-03-21 13:24:14
  • Python设计模式之桥接模式原理与用法实例分析

    2022-03-18 19:02:16
  • asp GetString的用法

    2008-06-12 13:46:00
  • CSS网页布局扩展小技巧

    2010-06-03 12:13:00
  • python使用xlrd和xlwt读写Excel文件的实例代码

    2021-08-30 08:43:55
  • Mysql环境变量配置方式

    2024-01-25 22:41:30
  • Linux下Python脚本自启动和定时启动的详细步骤

    2022-08-13 20:51:22
  • Go语言json编码驼峰转下划线、下划线转驼峰的实现

    2024-04-25 13:19:56
  • Python迭代器和生成器定义与用法示例

    2022-02-15 19:42:13
  • asp之家 网络编程 m.aspxhome.com