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