聲明
定位元素：position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。
平臺：win/IE win/FF
z-index:
用來確定定位元素在垂直于顯示屏方向（以下稱為Z軸）上的層疊順序
值： auto | 整數(shù) | inherit
默認(rèn)： auto
適用于： 定位元素
繼承性： no
理解stacking context
每個box都?xì)w屬于一個stacking context,它是元素在z軸方向上定位的參考。根元素形成 root stacking context，其他stacking context由定位元素設(shè)置z-index為非auto時產(chǎn)生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素產(chǎn)生stacking context。stacking context和 containing block 并沒有必然聯(lián)系。
理解stack level
在一個stacking context中的每個box，都有一個stack level（即層疊級別，以下統(tǒng)一用stack level），它決定著在同一stacking context中每個box在z軸上的顯示順序。同一stacking context中，stack level值大的顯示在上，stack level值小的顯示在下，同一stack level的遵循后來居上的原則（back-to-front ）。不同stacking context中，元素顯示順序以父級的stacking context的stack level來決定顯示的先后情況。于自身stack level無關(guān)。注意stack level和z-index并不是統(tǒng)一概念。（將在后文慢慢理解）
stack level規(guī)則
每個stacking context中可包含塊級（block）元素、內(nèi)聯(lián)（行內(nèi)inline）元素，還有設(shè)置float屬性的元素、定位元素等等他們在同一父級 stacking context中的顯示順序是怎樣的？即stack level是怎樣的呢？比如一個塊級元素和內(nèi)聯(lián)元素發(fā)生層疊的話誰會在上面呢？是不是誰在后面誰就在上面呢？
根據(jù)w3c關(guān)于stack level的介紹可以得出以下stack level規(guī)則
每個stacking context都包括以下stack level （后來居上）:
父級stacking context的背景、邊界
z-index值為負(fù)值的定位元素（值越小越在下）
文本流中非定位的、block塊級子元素
文本流中非定位的、float浮動子元素
仿佛能產(chǎn)生stacking context的inline元素
否則，inline元素的stack level將在block元素之前。
z-index：auto/0的定位元素
z-index值為正的定位元素（值越大越在上）
以上stack level在瀏覽器執(zhí)行情況:
firefox3.0下測試完全吻合，firefox2.0下稍有不同即：“z-index值為負(fù)值的定位元素”在“父級stacking context的背景、邊界”之前。
ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮動子元素”（以下簡稱浮動元素）和“文本流中非定位的、block塊級子元素”（以下簡稱block元素）處于同一級。
更近很多電子商務(wù)網(wǎng)站在登陸頁面上放置了大量信息。而他們“汗牛充棟”的邏輯很簡單：信息越多，用戶越多。不巧的是，網(wǎng)上購物的人總是很挑剔。
Jacob Nielson 報導(dǎo)說網(wǎng)絡(luò)用戶在挑選和購買的過程中，變得越來越急躁。他們不會根據(jù)分類或產(chǎn)品介紹，花時間到網(wǎng)上查找信息，大部分人更愿意使用方便的搜索引擎。如果用戶找不到他想要的，這筆交易就告吹。
這就使得簡潔的網(wǎng)頁設(shè)計成為關(guān)鍵，特別是你需要銷量的時候，它能讓用戶更快地找到資訊。如果一個網(wǎng)頁充斥著大量無用的文本、widget或無關(guān)的產(chǎn)品，那么這個網(wǎng)頁可以說已經(jīng)作廢了。
不過，有些電子商務(wù)網(wǎng)站恰恰相反。他們喜歡搞“多點開花”，以圖給潛在的用戶盡可能多的選擇，在網(wǎng)頁上添加了許多無用的信息、廣告和無關(guān)的產(chǎn)品。而不是清楚的一個網(wǎng)頁一件產(chǎn)品。
更少的產(chǎn)品意味著更多的關(guān)注
許多網(wǎng)絡(luò)公司可能忘記了一條電子商務(wù)的基本規(guī)則：網(wǎng)絡(luò)購物越簡單越好?？梢栽趤嗰R遜點幾下鼠標(biāo)就買到的DVD，誰也不想駕車跑幾公里外去買。如果購物的過程簡單快捷，顧客甚至不會介意多花點錢或多等些時間。
蘋果公司已經(jīng)完全掌握了更少主義藝術(shù)網(wǎng)頁設(shè)計。如果你打開他們的主頁，只會看到三樣?xùn)|西：
* 一個簡單的更部導(dǎo)航
* 主體部分的一件產(chǎn)品
* 在倒影部分的產(chǎn)品相關(guān)鏈接
除了標(biāo)準(zhǔn)的頁腳導(dǎo)航，整個主頁僅由這三個部分組成。以下是點擊一件產(chǎn)品進(jìn)入的網(wǎng)頁（以 iPhone 為例）。
在產(chǎn)品頁面，你前幾眼就能了解這個網(wǎng)頁是關(guān)于什么的：iPhone。產(chǎn)品本身占據(jù)了大部分的頁面，周圍是新 iPhone 的特點和一些應(yīng)用程序。但更重要的是，我們要了解這個網(wǎng)頁上沒有什么：
* 無關(guān)的產(chǎn)品
* 無關(guān)的側(cè)邊欄廣告
* 過多的重復(fù)
* 混亂的排版
蘋果公司用一個舒適的頁面展示了足夠多的信息。展示大量的信息沒有錯，只要讓它看起來并不多。這樣你同樣可以看到所有的信息，鏈接和圖片排列在 iPhone 的周圍，同樣發(fā)揮了作用。網(wǎng)頁上沒有任何無聊的廣告或無用的其它產(chǎn)品的信息。
這兒有一組經(jīng)過實踐考驗的方法，任何設(shè)計師或網(wǎng)頁**都可以學(xué)去，免得糟糕的頁面布局把顧客趕走。
只有你需要的。簡單的網(wǎng)頁設(shè)計中更重要的一個方面就是，只展示你要賣的產(chǎn)品。但這不是說你不能向用戶展示大量的信息。你只需要確定用戶想了解更多的信息。蘋果大量使用“Learn more”鏈接達(dá)到這一點。
減少點擊次數(shù)。顧客到達(dá)想要的頁面點擊次數(shù)越少，對你來說可能的回報就越高。可別讓顧客劈荊斬棘去買你的產(chǎn)品。
“奶奶”規(guī)則。如果你的奶奶（或任何年老的人）可以通過你的網(wǎng)站了解如何購買產(chǎn)品，那么產(chǎn)品被購買的幾率就很大。無用的信息會很快把你的奶奶搞暈的。
減少分欄。你每增加一個分欄，顯示內(nèi)容的空間就少一截。顧客不想要的東西占據(jù)了太多的版面，這就無法強(qiáng)調(diào)主要的產(chǎn)品。
盡量減少操作菜單。展示產(chǎn)品應(yīng)當(dāng)避免無關(guān)的干擾，推動顧客購買的進(jìn)程。顧客在選購時都希望盡可能少的思考，要讓顧客有更多思考的空間并專注于購買的過程。
保持整潔。一個干凈的設(shè)計可以讓訪問者心情愉悅。多花點時間確保你的網(wǎng)頁布局美觀，這樣才會有回頭客。
作為設(shè)計者應(yīng)該從顧客的角度審視網(wǎng)頁設(shè)計。你會在自己設(shè)計的網(wǎng)站上購物嗎？
其它**的電子商務(wù)設(shè)計實例
Bell.ca 只使用了很少的色彩來展示品牌，而給瀏覽者的操作菜單只有主導(dǎo)航欄。注意設(shè)計者是如何安置這么多不同的菜單——購物導(dǎo)航，還要同時照顧到私人和企業(yè)客戶。網(wǎng)頁不僅不凌亂，反而顯得簡潔明快，提供了很多菜單，但并沒有迫使瀏覽者一一瀏覽查找。同時也要注意到更部的產(chǎn)品導(dǎo)航設(shè)計得有多聰明，我想沒有誰還會選錯產(chǎn)品了吧。
Shoeguru.ca 展示了一個完全以用戶和產(chǎn)品為中心的設(shè)計。似乎產(chǎn)品本身就是一名推銷員。網(wǎng)頁上除了產(chǎn)品毫無其它無關(guān)的東西；甚至連導(dǎo)航菜單都“少得可憐”。
Etsy 在主頁上放置了如此多的信息卻絲毫不顯凌亂，簡直是網(wǎng)頁布局的樣板。Etsy 的產(chǎn)品目錄很繁雜，但**的設(shè)計使其顯得輕松樸實。事實證明，一個實用性的主頁也可以有很好的商業(yè)效果。
Crupress 是一個文雅的圖書網(wǎng)站，沒有什么娛樂成分。主頁上有大量的文本，并沒有攪亂用戶的思緒。更部的導(dǎo)航很醒目，但也只需要瞟一眼就能了解。所有的設(shè)計元素水乳交融。
Tokyocube 是個有趣時髦的銷售日本產(chǎn)品的小網(wǎng)站。網(wǎng)站沒有浪費寶貴的空間來介紹產(chǎn)品，而是把他們擺放在屏幕的右側(cè)。網(wǎng)站使用大量的留白使得用戶能夠快速清晰地欣賞產(chǎn)品。誰也忍不住要點擊幾個玩偶好好瞧瞧。
Furious Tees 相對前面幾個網(wǎng)站更注重圖形設(shè)計，主要有兩點作用：
* 體現(xiàn)網(wǎng)站活潑的基調(diào)
* 清楚的顯示所有的襯衫只賣19.99美元
訪問者也不會忘了 Furious Tees 是賣什么的，產(chǎn)品不都在面前嗎？把產(chǎn)品都放在主頁對于那些銷售新奇產(chǎn)品的網(wǎng)站特別有益，因為通常人們都不會去找這些東西。
但是把產(chǎn)品都集中放在主頁上，很容易把布局搞亂。Furious Tees 很好地避免了這些問題。他們把關(guān)注都集中在 T-shirt 和風(fēng)趣的設(shè)計上，沒有在網(wǎng)頁上放任何側(cè)邊欄或是廣告。
Basecamp (37 Signals)
論混合不同種類信息來銷售產(chǎn)品，恐怕沒有比 37 Signal 的項目管理工具 Basecamp 更牛B的了。但網(wǎng)頁上的信息數(shù)量恰到好處。每個詞語、每個圖片都經(jīng)過權(quán)衡。如果沒有足夠的信息，用戶不會浪費時間去理解產(chǎn)品；太多的信息用戶也無法招架。
得當(dāng)?shù)母勘尘吧屎凸净諛?biāo)，使得下面的主體部分更引人注目。他們將各種不同的媒體融合在一起的同時，還留出大量的空白，使得用戶不會一下子被繁雜的文本、圖片搞暈。
更后的總結(jié)
每個網(wǎng)站都會要求不同類型的布局、圖樣和文章以便銷售產(chǎn)品。但作為設(shè)計者有些事半功倍的辦法：
* 權(quán)衡每個詞語
* 刪去沒用的元素
* 使用雅致的色彩并大膽留白
* 控制訪問者每一次看到的信息數(shù)量
記住，網(wǎng)上購物的人總是很挑剔。他們不會磨磨蹭蹭地挑選商品，而會使用搜索引擎搜索關(guān)鍵詞來找到他們想要的。如果他們不喜歡看到的網(wǎng)頁，對不起，拜拜。對于網(wǎng)站來說，只能用一個不大的界面來吸引這些潛在客戶。一個雅致的、整潔的設(shè)計可以將關(guān)注集中到產(chǎn)品上（而不是其它任何東西），并幫助顧客更快地找到他們想要的。
簡潔的網(wǎng)頁設(shè)計幫你拉顧客，希望能與大家多多交流，謝謝！
