登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>CSS教程>>资料其它>>全透视:CSS Z-index 属性(2)
全透视:CSS Z-index 属性(2)
来源:蓝色理想 ‖ 作者:Louis Lazaris ‖ 点击: ‖ 时间:09-10-28 09:57:42 ‖ 【 】‖ 我要投稿

CSS 气泡:

Z-index 属性还可以用来实现基于CSS的提示气泡,就像下面trentrichardson.com展示的那样

Light Box:

如果不是因为应用了z-index 属性,现在也不会有那么多的品质优秀的Light Box脚本可以免费使用,比如说JQuery的一个插件FancyBox。

Light box 脚本使用半透明的PNG图片来使背景变暗,之后拿来一个新的元素,经常会使用类似窗口的DIV,将之放置在前排。覆盖住屏幕的PNG和之后的DIV都使用Z-index 属性以确保这2个元素会位于页面其他元素之上。

下拉菜单:

类似于Brainjar’s classic Revenge of the Menu Bar的下拉菜单使用Z-index以确保菜单的按钮和他们的下拉项位于层叠的顶部。

画廊效果的图片展示:

将JQuery animation和Z-index组合可以创造出幻灯片或画廊式的卓越效果。usejquery.com 网站中的这个demo向我们展示了这两者的绝妙组合带给我们的惊喜。

Polaroid Photo Gallery by Chris Spooner 采用功能更为强大的CSS3同Z-index配合,创造出了一个当鼠标划过时会重新码放的超cool效果。

Fancy Thumbnail Hover Effect 中Soh Tanaka 使用Query为基础的脚本改变z-index的赋值。

Stu Nicholls所做的CSS实验:

Stu Nicholls在他的网站 CSSplay 中阐释了众多的CSS的案例。下面是一些关于z-index属性的作品。

CSS 图片地图

CSS 游戏

CSS模仿框架

增强版的层叠布局:

24 ways 这个网站以Z-index为工具来提升它的模板体验,将年份和日期的长度、宽度延伸到和网站外层容器同等并相互交织,创造出了一个非常有趣的效果。

奇异的网摘栏:

Janko At Warp Speed 这个网站在“奇异的网摘栏”中使用了Z-index。

完美的整页背景图:

Chris Coyier 阐述了这个技术并将之应用到了ringvemedia.com 网站上。在内容容器上应用 z-index 以确保它出现在那个看上去像“背景”其实却不是的图片上。

总结

在CSS中层叠关系是一个复杂的话题。本文并不打算针对这个话题的所有细节进行讨论,而是针对Z-index究竟是如何影响我们网页的层叠顺序进行一次深入的探讨。这里所说的,当被真正的全面理解后,我们会发现这个CSS属性是如此的强大。

初学者现在应该会对这个属性有了非常好的理解,并且会避免很多在对其的使用过程中经常出现的问题。另外,有基础的开发者也会对如何正确使用Z-index来避免很多布局方面的问题有了更为深入的理解,并且为创造出更多的CSS艺术作品打开了大门。

延伸阅读

CSS z-index Property – w3schools

Elaborate Description of Stacking Contexts – W3C

z-index – SitePoint CSS Reference

How z-index Works – Screencast by Chris Coyier

z-index attribute – MSDN

关于作者

Louis Lazaris 是一个WEB开发方面的作者和自由设计师,他住在加拿大的多伦多市,在WEB开发方面有着9年经验。他在他的博客Impressive Webs 上发表WEB设计文章及教程。

本文链接:http://www.blueidea.com/tech/web/2009/7060.asp

加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:全透视:CSS Z-index 属性
  • 下一篇:无
  • 相关文章列表
    无相关新闻
    请文明参与讨论,禁止漫骂攻击。  
    网友评论