CSS教程

第一页 CSS教程-第5日
第二页 绝对定位
第三页 相对定位
第四页 控制定位了的要素
第五页 叠放文字和图象
第六页 同低版本浏览器的兼容性
第七页 放眼未来
第八页 第5日的练习
第九页 复习

[第1天][第2天][第3天][第4天][第5天][返回]

第五页 叠放文字和图象

下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。它不是通过设定边距负值或采用更小的行高来实现,而是通过......

z-index

当你定位多个要素并将其重叠时,你可以使用z-index来设定哪一个要素应出现在最上层。

观察这条CSS规则的执行效果(我将<H2>的文字设为绿色,以便你观察其不同之处):

Stylesheets

Mania

由于<H2>文字的z-index参数值更高,所以它显示在 <H1>文字的上面。(IE 4在MAC机上执行这一项时会出问题,它会将<H1>放在最上面。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。

你也可以给图象设定z-index。(对于Communicator,最好将 <IMG>标签包在<SPAN><DIV>标签内,然后将z-index应用到<SPAN><DIV>。)范例>>