聲明

定位元素：position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。
平臺(tái)：win/IE win/FF

z-index:

用來(lái)確定定位元素在垂直于顯示屏方向（以下稱(chēng)為Z軸）上的層疊順序

值：　　　auto | 整數(shù) | inherit
默認(rèn)：　　auto
適用于：　定位元素
繼承性：　no

理解stacking context

每個(gè)box都?xì)w屬于一個(gè)stacking context,它是元素在z軸方向上定位的參考。根元素形成 root stacking context，其他stacking context由定位元素設(shè)置z-index為非auto時(shí)產(chǎn)生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素產(chǎn)生stacking context。stacking context和 containing block 并沒(méi)有必然聯(lián)系。

理解stack level

在一個(gè)stacking context中的每個(gè)box，都有一個(gè)stack level（即層疊級(jí)別，以下統(tǒng)一用stack level），它決定著在同一stacking context中每個(gè)box在z軸上的顯示順序。同一stacking context中，stack level值大的顯示在上，stack level值小的顯示在下，同一stack level的遵循后來(lái)居上的原則（back-to-front ）。不同stacking context中，元素顯示順序以父級(jí)的stacking context的stack level來(lái)決定顯示的先后情況。于自身stack level無(wú)關(guān)。注意stack level和z-index并不是統(tǒng)一概念。（將在后文慢慢理解）

stack level規(guī)則

每個(gè)stacking context中可包含塊級(jí)（block）元素、內(nèi)聯(lián)（行內(nèi)inline）元素，還有設(shè)置float屬性的元素、定位元素等等他們?cè)谕桓讣?jí) stacking context中的顯示順序是怎樣的？即stack level是怎樣的呢？比如一個(gè)塊級(jí)元素和內(nèi)聯(lián)元素發(fā)生層疊的話誰(shuí)會(huì)在上面呢？是不是誰(shuí)在后面誰(shuí)就在上面呢？

根據(jù)w3c關(guān)于stack level的介紹可以得出以下stack level規(guī)則

每個(gè)stacking context都包括以下stack level （后來(lái)居上）:

1. 父級(jí)stacking context的背景、邊界

2. z-index值為負(fù)值的定位元素（值越小越在下）

3. 文本流中非定位的、block塊級(jí)子元素

4. 文本流中非定位的、float浮動(dòng)子元素

5. 仿佛能產(chǎn)生stacking context的inline元素
   否則，inline元素的stack level將在block元素之前。

6. z-index：auto/0的定位元素

7. z-index值為正的定位元素（值越大越在上）

以上stack level在瀏覽器執(zhí)行情況:

firefox3.0下測(cè)試完全吻合，firefox2.0下稍有不同即：“z-index值為負(fù)值的定位元素”在“父級(jí)stacking context的背景、邊界”之前。
ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮動(dòng)子元素”（以下簡(jiǎn)稱(chēng)浮動(dòng)元素）和“文本流中非定位的、block塊級(jí)子元素”（以下簡(jiǎn)稱(chēng)block元素）處于同一級(jí)。

#p#

最近很多電子商務(wù)網(wǎng)站在登陸頁(yè)面上放置了大量信息。而他們“汗牛充棟”的邏輯很簡(jiǎn)單：信息越多，用戶(hù)越多。不巧的是，網(wǎng)上購(gòu)物的人總是很挑剔。

Jacob Nielson 報(bào)導(dǎo)說(shuō)網(wǎng)絡(luò)用戶(hù)在挑選和購(gòu)買(mǎi)的過(guò)程中，變得越來(lái)越急躁。他們不會(huì)根據(jù)分類(lèi)或產(chǎn)品介紹，花時(shí)間到網(wǎng)上查找信息，大部分人更愿意使用方便的搜索引擎。如果用戶(hù)找不到他想要的，這筆交易就告吹。

這就使得簡(jiǎn)潔的網(wǎng)頁(yè)設(shè)計(jì)成為關(guān)鍵，特別是你需要銷(xiāo)量的時(shí)候，它能讓用戶(hù)更快地找到資訊。如果一個(gè)網(wǎng)頁(yè)充斥著大量無(wú)用的文本、widget或無(wú)關(guān)的產(chǎn)品，那么這個(gè)網(wǎng)頁(yè)可以說(shuō)已經(jīng)作廢了。

不過(guò)，有些電子商務(wù)網(wǎng)站恰恰相反。他們喜歡搞“多點(diǎn)開(kāi)花”，以圖給潛在的用戶(hù)盡可能多的選擇，在網(wǎng)頁(yè)上添加了許多無(wú)用的信息、廣告和無(wú)關(guān)的產(chǎn)品。而不是清楚的一個(gè)網(wǎng)頁(yè)一件產(chǎn)品。

更少的產(chǎn)品意味著更多的關(guān)注

許多網(wǎng)絡(luò)公司可能忘記了一條電子商務(wù)的基本規(guī)則：網(wǎng)絡(luò)購(gòu)物越簡(jiǎn)單越好?？梢栽趤嗰R遜點(diǎn)幾下鼠標(biāo)就買(mǎi)到的DVD，誰(shuí)也不想駕車(chē)跑幾公里外去買(mǎi)。如果購(gòu)物的過(guò)程簡(jiǎn)單快捷，顧客甚至不會(huì)介意多花點(diǎn)錢(qián)或多等些時(shí)間。

蘋(píng)果公司已經(jīng)完全掌握了極少主義藝術(shù)網(wǎng)頁(yè)設(shè)計(jì)。如果你打開(kāi)他們的主頁(yè)，只會(huì)看到三樣?xùn)|西：
   * 一個(gè)簡(jiǎn)單的頂部導(dǎo)航
   * 主體部分的一件產(chǎn)品
   * 在倒影部分的產(chǎn)品相關(guān)鏈接
除了標(biāo)準(zhǔn)的頁(yè)腳導(dǎo)航，整個(gè)主頁(yè)僅由這三個(gè)部分組成。以下是點(diǎn)擊一件產(chǎn)品進(jìn)入的網(wǎng)頁(yè)（以 iPhone 為例）。 

在產(chǎn)品頁(yè)面，你第一眼就能了解這個(gè)網(wǎng)頁(yè)是關(guān)于什么的：iPhone。產(chǎn)品本身占據(jù)了大部分的頁(yè)面，周?chē)切?iPhone 的特點(diǎn)和一些應(yīng)用程序。但更重要的是，我們要了解這個(gè)網(wǎng)頁(yè)上沒(méi)有什么：
   * 無(wú)關(guān)的產(chǎn)品
   * 無(wú)關(guān)的側(cè)邊欄廣告
   * 過(guò)多的重復(fù)
   * 混亂的排版

蘋(píng)果公司用一個(gè)舒適的頁(yè)面展示了足夠多的信息。展示大量的信息沒(méi)有錯(cuò)，只要讓它看起來(lái)并不多。這樣你同樣可以看到所有的信息，鏈接和圖片排列在 iPhone 的周?chē)瑯影l(fā)揮了作用。網(wǎng)頁(yè)上沒(méi)有任何無(wú)聊的廣告或無(wú)用的其它產(chǎn)品的信息。

這兒有一組經(jīng)過(guò)實(shí)踐考驗(yàn)的方法，任何設(shè)計(jì)師或網(wǎng)頁(yè)開(kāi)發(fā)者都可以學(xué)去，免得糟糕的頁(yè)面布局把顧客趕走。

只有你需要的。簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)中最重要的一個(gè)方面就是，只展示你要賣(mài)的產(chǎn)品。但這不是說(shuō)你不能向用戶(hù)展示大量的信息。你只需要確定用戶(hù)想了解更多的信息。蘋(píng)果大量使用“Learn more”鏈接達(dá)到這一點(diǎn)。

減少點(diǎn)擊次數(shù)。顧客到達(dá)想要的頁(yè)面點(diǎn)擊次數(shù)越少，對(duì)你來(lái)說(shuō)可能的回報(bào)就越高?？蓜e讓顧客劈荊斬棘去買(mǎi)你的產(chǎn)品。

“奶奶”規(guī)則。如果你的奶奶（或任何年老的人）可以通過(guò)你的網(wǎng)站了解如何購(gòu)買(mǎi)產(chǎn)品，那么產(chǎn)品被購(gòu)買(mǎi)的幾率就很大。無(wú)用的信息會(huì)很快把你的奶奶搞暈的。

減少分欄。你每增加一個(gè)分欄，顯示內(nèi)容的空間就少一截。顧客不想要的東西占據(jù)了太多的版面，這就無(wú)法強(qiáng)調(diào)主要的產(chǎn)品。

盡量減少操作菜單。展示產(chǎn)品應(yīng)當(dāng)避免無(wú)關(guān)的干擾，推動(dòng)顧客購(gòu)買(mǎi)的進(jìn)程。顧客在選購(gòu)時(shí)都希望盡可能少的思考，要讓顧客有更多思考的空間并專(zhuān)注于購(gòu)買(mǎi)的過(guò)程。

保持整潔。一個(gè)干凈的設(shè)計(jì)可以讓訪問(wèn)者心情愉悅。多花點(diǎn)時(shí)間確保你的網(wǎng)頁(yè)布局美觀，這樣才會(huì)有回頭客。

作為設(shè)計(jì)者應(yīng)該從顧客的角度審視網(wǎng)頁(yè)設(shè)計(jì)。你會(huì)在自己設(shè)計(jì)的網(wǎng)站上購(gòu)物嗎？

其它優(yōu)秀的電子商務(wù)設(shè)計(jì)實(shí)例 

Bell.ca 只使用了很少的色彩來(lái)展示品牌，而給瀏覽者的操作菜單只有主導(dǎo)航欄。注意設(shè)計(jì)者是如何安置這么多不同的菜單——購(gòu)物導(dǎo)航，還要同時(shí)照顧到私人和企業(yè)客戶(hù)。網(wǎng)頁(yè)不僅不凌亂，反而顯得簡(jiǎn)潔明快，提供了很多菜單，但并沒(méi)有迫使瀏覽者一一瀏覽查找。同時(shí)也要注意到頂部的產(chǎn)品導(dǎo)航設(shè)計(jì)得有多聰明，我想沒(méi)有誰(shuí)還會(huì)選錯(cuò)產(chǎn)品了吧。

Shoeguru.ca 展示了一個(gè)完全以用戶(hù)和產(chǎn)品為中心的設(shè)計(jì)。似乎產(chǎn)品本身就是一名推銷(xiāo)員。網(wǎng)頁(yè)上除了產(chǎn)品毫無(wú)其它無(wú)關(guān)的東西；甚至連導(dǎo)航菜單都“少得可憐”。

Etsy 在主頁(yè)上放置了如此多的信息卻絲毫不顯凌亂，簡(jiǎn)直是網(wǎng)頁(yè)布局的樣板。Etsy 的產(chǎn)品目錄很繁雜，但優(yōu)秀的設(shè)計(jì)使其顯得輕松樸實(shí)。事實(shí)證明，一個(gè)實(shí)用性的主頁(yè)也可以有很好的商業(yè)效果。

Crupress 是一個(gè)文雅的圖書(shū)網(wǎng)站，沒(méi)有什么娛樂(lè)成分。主頁(yè)上有大量的文本，并沒(méi)有攪亂用戶(hù)的思緒。頂部的導(dǎo)航很醒目，但也只需要瞟一眼就能了解。所有的設(shè)計(jì)元素水乳交融。

Tokyocube 是個(gè)有趣時(shí)髦的銷(xiāo)售日本產(chǎn)品的小網(wǎng)站。網(wǎng)站沒(méi)有浪費(fèi)寶貴的空間來(lái)介紹產(chǎn)品，而是把他們擺放在屏幕的右側(cè)。網(wǎng)站使用大量的留白使得用戶(hù)能夠快速清晰地欣賞產(chǎn)品。誰(shuí)也忍不住要點(diǎn)擊幾個(gè)玩偶好好瞧瞧。

Furious Tees 相對(duì)前面幾個(gè)網(wǎng)站更注重圖形設(shè)計(jì)，主要有兩點(diǎn)作用：
   * 體現(xiàn)網(wǎng)站活潑的基調(diào)
   * 清楚的顯示所有的襯衫只賣(mài)19.99美元

訪問(wèn)者也不會(huì)忘了 Furious Tees 是賣(mài)什么的，產(chǎn)品不都在面前嗎？把產(chǎn)品都放在主頁(yè)對(duì)于那些銷(xiāo)售新奇產(chǎn)品的網(wǎng)站特別有益，因?yàn)橥ǔＨ藗兌疾粫?huì)去找這些東西。

但是把產(chǎn)品都集中放在主頁(yè)上，很容易把布局搞亂。Furious Tees 很好地避免了這些問(wèn)題。他們把關(guān)注都集中在 T-shirt 和風(fēng)趣的設(shè)計(jì)上，沒(méi)有在網(wǎng)頁(yè)上放任何側(cè)邊欄或是廣告。

Basecamp (37 Signals)

論混合不同種類(lèi)信息來(lái)銷(xiāo)售產(chǎn)品，恐怕沒(méi)有比 37 Signal 的項(xiàng)目管理工具 Basecamp 更牛B的了。但網(wǎng)頁(yè)上的信息數(shù)量恰到好處。每個(gè)詞語(yǔ)、每個(gè)圖片都經(jīng)過(guò)權(quán)衡。如果沒(méi)有足夠的信息，用戶(hù)不會(huì)浪費(fèi)時(shí)間去理解產(chǎn)品；太多的信息用戶(hù)也無(wú)法招架。

得當(dāng)?shù)捻敳勘尘吧屎凸净諛?biāo)，使得下面的主體部分更引人注目。他們將各種不同的媒體融合在一起的同時(shí)，還留出大量的空白，使得用戶(hù)不會(huì)一下子被繁雜的文本、圖片搞暈。

最后的總結(jié)

每個(gè)網(wǎng)站都會(huì)要求不同類(lèi)型的布局、圖樣和文章以便銷(xiāo)售產(chǎn)品。但作為設(shè)計(jì)者有些事半功倍的辦法：
   * 權(quán)衡每個(gè)詞語(yǔ)
   * 刪去沒(méi)用的元素
   * 使用雅致的色彩并大膽留白
   * 控制訪問(wèn)者每一次看到的信息數(shù)量

記住，網(wǎng)上購(gòu)物的人總是很挑剔。他們不會(huì)磨磨蹭蹭地挑選商品，而會(huì)使用搜索引擎搜索關(guān)鍵詞來(lái)找到他們想要的。如果他們不喜歡看到的網(wǎng)頁(yè)，對(duì)不起，拜拜。對(duì)于網(wǎng)站來(lái)說(shuō)，只能用一個(gè)不大的界面來(lái)吸引這些潛在客戶(hù)。一個(gè)雅致的、整潔的設(shè)計(jì)可以將關(guān)注集中到產(chǎn)品上（而不是其它任何東西），并幫助顧客更快地找到他們想要的。