css z-index空间位置

2012/11/27 15:08:22作者：佚名来源：网络

移动端

【实例介绍】

z-index空间位置
CSS可以处理高度、宽度、深度三个维度。在前面的课程中，我们已经了解了前两个维度。
在本课中，我们将学习如何令不同元素具有层次。简言之，就是关于元素堆叠的次序问题。
z—index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元
素的前面。

【基本语法】

z-index：auto | 数字

【语法介绍】

z—index属性的值为整数，可以为正数也可以为负数。当块被设置为position时．该值便可
设置各块之间的重叠高低关系，默认的z-index值为0。auto参数遵从其父对象的定位：数字必
页是无单位的整数值，可以取负值

【实例代码】


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层叠顺序</title>
<style type="text/css">
<!--
.img {
 position:absolute;
 top: 25px;
 right: 20px;
 left: 25px;
 bottom: 20px;
 z-index: 1;
 width: 394px;
 height: 398px;
}
.text {
 font-size: 12px;
 position: absolute;
 top: 35px;
 right: 20px;
 left: 38px;
 bottom: 25px;
 z-index: 2;
 height: 130px;
}
-->
</style>
</head>
<body>
  <div><img src="images/bj.jpg" width="330" height="352" class="img" /></div>
<div class="text">
  <p>尺寸：均码</p>
  <p>肩宽36CM  胸围86CM  裙长87CM  袖长60CM</p>
  <p>这款连衣裙部分下摆雪纺花在右边，此类不算质量问题。</p>
  <p>小店商品基本上都是现货销售，但是由于商品流动迅速和难以预测难免会出现暂时的缺货断码断色问题，所以请亲们拍前务必和掌柜联系询问是否有货； 对于直接拍下付款但没有现货的情况，掌柜会第一时间主动联系协商推迟发货或者退款问题。  </p>
  <p><br>
</p>
</div>
</body>
</html>

【代码分析】

此段代码中，首先在<head><／head>之间用<style>定义了img标记中的position属性为
absolute，z-index为1表示默认最底层，定义了text标记中的position属性为absolute。z-index，
为2，然后分别对图像和段落文本应用img和text样式。由于图像的z-index是1，因此它在文
本的后面出现。在浏览器中预览，效果如图18．17所示。

空间位置