Stu Nicholls所做的CSS實驗:
Stu Nicholls在他的網(wǎng)站 CSSplay 中闡釋了眾多的CSS的案例。下面是一些關(guān)于z-index屬性的作品。
CSS 圖片地圖
CSS 游戲
CSS模仿框架
增強版的層疊布局:
24 ways 這個網(wǎng)站以Z-index為工具來提升它的模板體驗,將年份和日期的長度、寬度延伸到和網(wǎng)站外層容器同等并相互交織,創(chuàng)造出了一個非常有趣的效果。
奇異的網(wǎng)摘欄:
Janko At Warp Speed 這個網(wǎng)站在“奇異的網(wǎng)摘欄”中使用了Z-index。
完美的整頁背景圖:
Chris Coyier 闡述了這個技術(shù)并將之應(yīng)用到了ringvemedia.com 網(wǎng)站上。在內(nèi)容容器上應(yīng)用 z-index 以確保它出現(xiàn)在那個看上去像“背景”其實卻不是的圖片上。
總結(jié)
在CSS中層疊關(guān)系是一個復(fù)雜的話題。本文并不打算針對這個話題的所有細節(jié)進行討論,而是針對Z-index究竟是如何影響我們網(wǎng)頁的層疊順序進行一次深入的探討。這里所說的,當(dāng)被真正的全面理解后,我們會發(fā)現(xiàn)這個CSS屬性是如此的強大。
初學(xué)者現(xiàn)在應(yīng)該會對這個屬性有了非常好的理解,并且會避免很多在對其的使用過程中經(jīng)常出現(xiàn)的問題。另外,有基礎(chǔ)的開發(fā)者也會對如何正確使用Z-index來避免很多布局方面的問題有了更為深入的理解,并且為創(chuàng)造出更多的CSS藝術(shù)作品打開了大門。
延伸閱讀
關(guān)于作者
Louis Lazaris 是一個WEB開發(fā)方面的作者和自由設(shè)計師,他住在加拿大的多倫多市,在WEB開發(fā)方面有著9年經(jīng)驗。他在他的博客Impressive Webs 上發(fā)表WEB設(shè)計文章及教程。
經(jīng)典論壇討論: http://bbs.blueidea.com/thread-2952322-1-1.html
本文鏈接:http://www.95time.cn/tech/web/2009/7060.asp
出處:藍色理想
責(zé)任編輯:bluehearts
上一頁 全透視:CSS Z-index 屬性 [6] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|