转自“网络维他命”地址：http://www.netvtm.com/
关于CSS的Z-index 的教程（CSS+DIV布局系列收藏）
作者： linyupark
2006-09-01
这段时间在做公司项目的布局时突然想起很久没用的绝对定位了，一提到绝对定位自然又会联想到z-index，也只有定位为absolute的时候它才有效果。下面就讲下它的作用，顺便自己也复习下。
功效一：堆叠次要信息，拖出主要内容
简单说就把所有float的块都挡在下面，通常我在做布局的时候会发生因为宽度缩小而使得最靠边的float的块开始往下掉
比如这样:
<div style="width:200px; float:left; height:100px; background:#ccc"></div>
<div style="width:200px; float:left; height:100px; background:#aaa"></div>
<div style="width:200px; float:left; height:100px; background:#999"></div>
<div style="width:200px; float:left; height:100px; background:#666"></div>
<div style="width:200px; float:left; height:100px; background:#333"></div>
当窗口缩小的时候最旁边的块就会往下掉，通常为了防止出现这样的情况我们会限制宽度，加上一个wrap。
但在100%宽的时候这个方法就不太好使唤了，通常这个时候就可以用到绝对定位,如果有两个绝对定位的块就可以加上合适的z-index来决定谁在谁的上面
举一个简单的三列，左右是栏目，中间是主体文字信息,就可以这样来做到100%宽屏:
<div style="width:22%; float:left; height:300px; background:#ccc"></div>
<div style="width:55%; position:absolute; left:22%; top:0; height:300px; background:#aaa"></div>
<div style="width:24%; float:right; height:300px; background:#999"></div>
可以发现float的内容都在绝对定位层的下面
功能二：屏蔽选中文字
让一些拿来主义的人带一点困难，当然JS也可以做到这点，这里用的是css而已，呵呵
<div style="width:80%; height:300px; position:relative;">
<p> 你来选中我呀~~</p>
<p><a href="#"> 连接没失效了</a></p>
<div style="position:absolute; z-index:100; left:0; top:0; width:80%; height:300px;"></div>
</div>
上面这段代码在IE6显示的时候，连接还是可以用的，但到了FF浏览器就不行了。想要连接在IE6也无效的话可以给下面的DIV加一个z-index:-10就可以了，但这样在FF里就什么内容也不会显示了...
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=1054123