第12章 层次堆叠与隐藏.pptVIP

第12章 层次堆叠与隐藏 从我们的肉眼看，所有的网页都是平面的、二维的，即只有水平的X轴方向和垂直的Y轴方向，如图所示。 12.1 使网页变成三维立体的z-index 前几年，流行过一阵三维立体画，当我们仔细注视图画直至达到“对眼”(英文叫做Cross-eyed)的程度，画面就会分层，呈现出不同的图案，很有立体效果。 CSS对于网页的三维支持，在效果上很类似立体画，不过，它将不同的标签都直接显现出来，并不用我们费眼力去凝神关注地观察。在这种意义上，它更类似一堆扑克牌部分摊开的效果，如图所示。 12.1.1 z-index属性简介 在CSS中，通过设置标签的z-index属性，可以控制标签在z轴方向上的次序。还是举图扑克牌的例子，如果打算要黑桃10这个标签显示在最上层，那么只要将它的z-index属性比其他牌都大就可以了，类比一下，改变z-index相当于我们理牌的过程。 【z-index设置语法】 设置z-index很简单，在样式规则中增加如下的字符即可： z-index:数值 数值可以是如下两种： auto：默认值，表示该标签与父标签“平起平坐”，处于同一水平面上。 number：无单位的整数值，也可为负数，不过Firefox并不支持负数，为了标准化起见，建议设置为正整数。 12.1.2 堆叠上下文（stack context） 所谓堆叠上下文，英文名称为stack c