声明

定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。
平台：win/IE win/FF

z-index:

用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序

值：　　　auto | 整数 | inherit
默认：　　auto
适用于：　定位元素
继承性：　no

理解stacking context

每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking conte💮xt，其他stacking context由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素产生st🦩acking context。stacking context和 containing block 并没有必然联系。

理解stack level

在一个stacking context中的每个box，都有一个st💟ack 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 leve❀l无关。注意stack level和z-index并不是统一概念。（将在后文慢慢理解）

stack level规则

每个stacking context中可包含块级（block）元素、内联（行内inline）元素，还有设置float属性的元素、定位元素等等他们在同一父级 stacking context中的显示顺序是怎样的？即s💎tack level是怎样的呢？🌜比如一个块级元素和内联元素发生层叠的话谁会在上面呢？是不是谁在后面谁就在上面呢？

根据w3c关于stack level的介绍可以得出以下stack level规则

每个stacking context都包括以下stack level （后来居上）:

1. 父级stacking context的背景、边界

2. z-index值为负值的定位元素（值越小越在下）

3. 文本流中非定位的、block块级子元素

4. 文本流中非定位的、float浮动子元素

5. 仿佛能产生stacking context的inline元素
   否则，inline元素的stack level将在block元素之前。

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

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

以上stack level在浏览器执行情况:

firefox3.0下测试完全吻合，firefox2.0下稍有不同即：“z-index值为负值的定位元素”在“父级stacking context的背景、边界”之前。
ie6.0和7.0中：inline元素的sta🐬ck level位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于同一级꧋。

#p#

最近很多电子商务网站在登陆页꧙面上放置了大量信息。而他们“汗牛充栋”的逻辑很简单：信息越多，用户越多。不巧的是，网上购物的人总是很挑剔。

Jacob Nielson 报导说网络用户在挑选和购买的🧸过程中，变得越来越急躁。他们不会根据分类或产品介绍，花时间到网上查找信息，大部分人更愿意使用方便的搜索引擎🐎。如果用户找不到他想要的，这笔交易就告吹。

这就使得简洁的网页设计成为关键，特别是你需要销量的时候，它能让用户更快地找到资讯。如果一个网页充斥着大量无用的文本、widget或无🌸关的产品，那么这个网页可以说已经作废了。

不过，有些电🥂子商务网站恰恰相反。他们喜欢搞“多点开花”，以图给潜在的用户尽可能多的选择，在网页上添加了许多无用的信息、广告和无关的产品。而不是清楚的一个网页一件产品。

更少的产品意味着更多的关注

许多网络公司可能忘记🎐了一条电子商务的基本规则：网络购物越简单越好。可以在亚马逊点几下鼠标就买到的DVD，谁也不想驾车跑几公里外去买。如果购物的过程简单快捷，顾客甚至不会介意多花点钱或多等些时间。

苹果公司已经完全掌握了极少主义艺术网页设计。如果你打开他们的主页，只会看到三样东西：
   * 一个简单的顶部导航
   * 主体部分的一件产品
   * 在倒影部分的产品相关链接
除了标准的页脚导航，整个主页仅由🌺这三个部分组成。以下是点击一ꦰ件产品进入的网页（以 iPhone 为例）。 

在产品页面，你第一眼就能了解这个网页是关于什么的：iPhone。产品本身占据了大部分的页面，周围是新 iPhone 的特点和一些应用程序。但更重要的是，我们要了解这个网页上没有什么：
   * 无关的产品
   * 无关的侧边栏广告
   * 过多的重复
   * 混乱的排版

苹果公司用一个舒适的页面展示了足够多的信息。展示大量的信息没有错，只要让它看起来并不多。这样你同样可以看到所有的信息，链接和图片排列在 iPho🍷ne 的周围，同样发挥了作用。网页上没有任何无聊🐲的广告或无用的其它产品的信息。

这儿有一组经过实践考验的方法，任何设计师或网页开发者都可以学去，免得糟糕的页面布局把顾客赶走。

只有你需要的。简单的网页设计中最重要的一个方面就是，只展示你要卖的产品。但这不是说你不能向用户展示大量的信息。你只需要确定用户想了解更多的信息。苹果大量使用“Learn more”链接达𝐆到这一点。

减少点ꦗ击次数。顾客到达想要的页面点击次♓数越少，对你来说可能的回报就越高。可别让顾客劈荆斩棘去买你的产品。

“奶奶”规则。如果你的奶奶（或任何年老的人）可以通🐟过你的网站了解如何购买产品，那么产品被购买的几率就很大。无用的信息会很快把你的奶奶搞晕的。

减少分栏。你每增加一个分栏，显示内容的空间就少一截。顾客不想要的东西占据了太多的版面，这就ꦗ无法强调🍌主要的产品。

尽量减少操作菜单ꦿ。展示产品应当避免无关的干扰，推动𒅌顾客购买的进程。顾客在选购时都希望尽可能少的思考，要让顾客有更多思考的空间并专注于购买的过程。

保持整洁。一个干净的设计可以让访问者心情愉悦。多花点时间确保你的网页布局美观，这样才会有回头客。

作为设计者应该从顾客的角度审视网页设计。你会在自己设计的网站上购物吗？

其它优秀的电子商务设计实例 

Bell.🐼ca 只使用了很少✱的色彩来展示品牌，而给浏览者的操作菜单只有主导航栏。注意设计者是如何安置这么多不同的菜单——购物导航，还要同时照顾到私人和企业客户。网页不仅不凌乱，反而显得简洁明快，提供了很多菜单，但并没有迫使浏览者一一浏览查找。同时也要注意到顶部的产品导航设计得有多聪明，我想没有谁还会选错产品了吧。

Shoeguru.ca 展示了一个完全以用户和✨产品为中心的设计。似乎产品本身就是一名推销员。网页上除了产品毫无其它无关的东西；甚至连导航菜单都“少得可怜”。

Etsy 在主页上放置了如此多的信息却丝毫不显ꦫ凌乱，简直是网页布局的样板。Etsy 的产品目录很繁杂，但优秀的设计使其显得轻松🌃朴实。事实证明，一个实用性的主页也可以有很好的商业效果。

Crupres𓃲s 是一个文雅的图书网站，没有ജ什么娱乐成分。主页上有大量的文本，并没有搅乱用户的思绪。顶部的导航很醒目，但也只需要瞟一眼就能了解。所有的设计元素水乳交融。

Tokyocube 是个有趣时髦的销售日本产品的小网站。网站没有浪费宝贵的空间来介绍产品，而是把他们摆放在屏幕的𒉰右侧。网站使用大量的留白使得用户能够快速清晰地欣赏产品。谁也忍不住要点击几个玩偶好好瞧瞧。

Furious Tees 相对前面几个网站更注重图形设计，主要有两点作用：
   * 体现网站活泼的基调
   * 清楚的显示所有的衬衫只卖19.99美元

访问者也不会忘了 Furious🐓 Teesℱ 是卖什么的，产品不都在面前吗？把产品都放在主页对于那些销售新奇产品的网站特别有益，因为通常人们都不会去找这些东西。

但是把产品都集中放在主页上，很容易把布局搞乱。Furious Te꧟es 很好地避免了这些问题。他们把关注都集中在 T-shirt 和风趣的设计上，没有在网页上放任何侧边栏或是广告。

Basecamp (37 Signals)

论混合不同种类信息来销售产品，恐怕没有比 37 Signal 的项目管理工具 Basecamp 更牛B的了。但网页上的信息数量恰到好处。每个词语▨、每个图片都经过权衡。如果没有足够的信息，用户不会浪费时间去理解产品；太多的信息用户也无法招架。

得当的顶部背景🔯色彩和公司徽标，使得下面的主体部分更引人注目。他们将各种不同的媒体融合在一起的同时，还留🍰出大量的空白，使得用户不会一下子被繁杂的文本、图片搞晕。

最后的总结

每个网站都会要求不同类型的布局、图样和文章以便销售产品。但作为设计者有些事半功倍的办法：
   * 权衡每个词语
   * 删去没用的元素
   * 使用雅致的色彩并大胆留白
   * 控制访问者每一次看到的信息数量

记住，网上购物的人总是很挑剔。他们不会磨磨蹭蹭地挑选商品，而会使用搜索引擎搜🌳索关键词来找到他们想要的。如果他们不喜欢看到的网页，对不起，拜拜。对于网站来说，只能用一个不大的界面来吸引这些潜在客户。一个雅致的、整洁的设计可以将关注集中到产品上（而不ও是其它任何东西），并帮助顾客更快地找到他们想要的。