声明
定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。
平台：win/IE win/FF
z-index:
用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序
值： auto | 整数 | inherit
默认： auto
适用于： 定位元素
继续性： no
理解stacking context
每个box都回属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context，其他stacking context由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素产生stacking context。stacking context和 containing block 并没有必然联系。
理解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规则
每个stacking context中可包含块级（block）元素、内联（行内inline）元素，宁波租房还有设置float属性的元素、定位元素等等他们在同一父级 stacking context中的显示顺序是怎样的？即stack level是怎样的呢？比如一个块级元素和内联元素发生层叠的话谁会在上面呢？是不是谁在后面谁就在上面呢？
根据w3c关于stack level的先容可以得出以下stack level规则
每个stacking context都包括以下stack level （后来居上）:
父级stacking context的背景、边界
z-index值为负值的定位元素（值越小越在下）
文本流中非定位的、block块级子元素
文本流中非定位的、float浮动子元素
仿佛能产生stacking context的inline元素
否则，inline元素的stack level将在block元素之前。
z-index：auto/0的定位元素
z-index值为正的定位元素（值越大越在上）
以上stack level在浏览器执行情况:
firefox3.0下测试完全吻合，firefox2.0下稍有不同即：“z-index值为负值的定位元素”在“父级stacking context的背景、边界”之前。
ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于同一级。
最近很多电子商务网站在登陆页面上放置了大量信息。而他们“汗牛充栋”的逻辑很简单：信息越多，用户越多。不巧的是，网上购物的人总是很挑剔。
Jacob Nielson 报导说网络用户在挑选和购买的过程中，变得越来越急躁。他们不会根据分类或产品先容，花时间到网上查找信息，大部分人更愿意使用方便的搜索引擎。假如用户找不到他想要的，这笔交易就告吹。
这就使得简洁的网站制作成为关键，特别是你需要销量的时候，它能让用户更快地找到资讯。假如一个网页充斥着大量无用的文本、widget或无关的产品，那么这个网页可以说已经作废了。
不过，有些电子商务网站恰恰相反。他们喜欢搞“多点开花”，以图给潜伏的用户尽可能多的选择，在网页上添加了很多无用的信息、广告和无关的产品。而不是清楚的一个网页一件产品。
更少的产品意味着更多的关注
很多网络公司可能忘记了一条电子商务的基本规则：网络购物越简单越好。可以在亚马逊点几下鼠标就买到的DVD，谁也不想驾车跑几公里外往买。假如购物的过程简单快捷，顾客甚至不会介意多花点钱或多等些时间。
苹果公司已经完全把握了极少主义艺术网站制作。假如你打开他们的主页，只会看到三样东西：
* 一个简单的顶部导航
* 主体部分的一件产品
* 在倒影部分的产品相关链接
除了标准的页脚导航，整个主页仅由这三个部分组成。以下是点击一件产品进进的网页（以 iPhone 为例）。
在产品页面，你第一眼就能了解这个网页是关于什么的：iPhone。产品本身占据了大部分的页面，四周是新 iPhone 的特点和一些应用程序。但更重要的是，我们要了解这个网页上没有什么：
* 无关的产品
* 无关的侧边栏广告
* 过多的重复
* 混乱的排版
苹果公司用一个舒适的页面展示了足够多的信息。展示大量的信息没有错，只要让它看起来并未几。这样你同样可以看到所有的信息，链接和图片排列在 iPhone 的四周，同样发挥了作用。网页上没有任何无聊的广告或无用的其它产品的信息。
这儿有一组经过实践考验的方法，任何设计师或网页开发者都可以学往，免得糟糕的页面布局把顾客赶走。
只有你需要的。简单的网站制作中最重要的一个方面就是，只展示你要卖的产品。但这不是说你不能向用户展示大量的信息。你只需要确定用户想了解更多的信息。苹果大量使用“Learn more”链接达到这一点。
减少点击次数。顾客到达想要的页面点击次数越少，对你来说可能的回报就越高。可别让顾客劈荆斩棘往买你的产品。
“奶奶”规则。假如你的奶奶（或任何年老的人）可以通过你的网站了解如何购买产品，那么产品被购买的几率就很大。无用的信息会很快把你的奶奶搞晕的。
减少分栏。你每增加一个分栏，显示内容的空间就少一截。顾客不想要的东西占据了太多的版面，这就无法夸大主要的产品。
尽量减少操纵菜单。展示产品应当避免无关的干扰，推动顾客购买的进程。宁波品牌网顾客在选购时都希看尽可能少的思考，要让顾客有更多思考的空间并专注于购买的过程。
保持整洁。一个干净的设计可以让访问者心情愉悦。多花点时间确保你的网页布局美观，这样才会有回头客。
作为设计者应该从顾客的角度审阅网站制作。你会在自己设计的网站上购物吗？
其它优秀的电子商务设计实例
Bell.ca 只使用了很少的色彩来展示品牌，而给浏览者的操纵菜单只有主导航栏。留意设计者是如何安置这么多不同的菜单——购物导航，还要同时照顾到私人和企业客户。网页不仅不凌乱，反而显得简洁明快，提供了很多菜单，但并没有迫使浏览者逐一浏览查找。同时也要留意到顶部的产品导航设计得有多聪明，我想没有谁还会选错产品了吧。
Shoeguru.ca 展示了一个完全以用户和产品为中心的设计。似乎产品本身就是一名倾销员。网页上除了产品毫无其它无关的东西；甚至连导航菜单都“少得可怜”。
Etsy 在主页上放置了如此多的信息却丝尽不显凌乱，简直是网页布局的样板。Etsy 的产品目录很繁杂，但优秀的设计使其显得轻松朴实。事实证实，一个实用性的主页也可以有很好的贸易效果。
Crupress 是一个文雅的图书网站，没有什么娱乐成分。主页上有大量的文本，并没有搅乱用户的思绪。顶部的导航很醒目，但也只需要瞟一眼就能了解。所有的设计元素水乳交融。
Tokyocube 是个有趣时髦的销售日本产品的小网站。网站没有浪费宝贵的空间来先容产品，而是把他们摆放在屏幕的右侧。网站使用大量的留白使得用户能够快速清楚地欣赏产品。谁也忍不住要点击几个玩偶好好瞧瞧。
Furious Tees 相对前面几个网站更注重图形设计，主要有两点作用：
* 体现网站活泼的基调
* 清楚的显示所有的衬衫只卖19.99美元
访问者也不会忘了 Furious Tees 是卖什么的，产品不都在眼前吗？把产品都放在主页对于那些销售新奇产品的网站特别有益，由于通凡人们都不会往找这些东西。
但是把产品都集中放在主页上，很轻易把布局搞乱。Furious Tees 很好地避免了这些题目。他们把关注都集中在 T-shirt 和风趣的设计上，没有在网页上放任何侧边栏或是广告。
Basecamp (37 Signals)
论混合不同种类信息来销售产品，恐怕没有比 37 Signal 的项目治理工具 Basecamp 更牛B的了。但网页上的信息数目恰到好处。每个词语、每个图片都经过权衡。假如没有足够的信息，用户不会浪费时间往理解产品；太多的信息用户也无法招架。
得当的顶部背景色彩和公司徽标，使得下面的主体部分更引人注目。他们将各种不同的媒体融合在一起的同时，还留出大量的空缺，使得用户不会一下子被繁杂的文本、图片搞晕。
最后的总结
每个网站都会要求不同类型的布局、图样和文章以便销售产品。但作为设计者有些事半功倍的办法：
* 权衡每个词语
* 删往没用的元素
* 使用雅致的色彩并大胆留白
* 控制访问者每一次看到的信息数目
记住，网上购物的人总是很挑剔。他们不会磨磨蹭蹭地挑选商品，而会使用搜索引擎搜索关键词来找到他们想要的。假如他们不喜欢看到的网页，对不起，拜拜。对于网站来说，只能用一个不大的界面来吸引这些潜伏客户。一个雅致的、整洁的设计可以将关注集中到产品上（而不是其它任何东西），并帮助顾客更快地找到他们想要的。
