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