CSS样式中的使用z-index属性控制元素堆叠顺序

小七 发表于:2017-05-18 12:58 复制链接

您的等级不够,“初级及以上会员” 开启

?提问题 +写文章
阅读数:7740
       网页设计样式过程中有时候会让几个元素有堆积叠加的效果,也就是让指定的元素显示在前面还是后面的问题,这个用css可以非常方便的控制,z-index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,也可以用立体的坐标轴来理解,xy轴组成一个平面,也就是我们看到的页面,z轴垂直于这个平面,z-index的值如果为正数,则里我们更近,反之,负数就越远。

      下面我们通过案例来定义3个div块,分别通过position定位,让其有叠加的效果,再通过z-index来控制堆叠顺序,让其中某个块显示在前面或者后面。第一次先不加z-index属性,只用position来定位3个div,测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.testone{
             width:150px;
             height:50px;
             background-color:#FF0000;
             position:absolute;
             top:50px;
             left:50px;            }
.testtwo{
             width:150px;
             height:50px;
             background-color:#00FF00;
             position:absolute;
             top:60px;
             left:60px;
            }
.testthree{
             width:150px;
             height:50px;
             background-color:#0000FF;
             position:absolute;
             top:70px;
             left:70px;
            }

</style>
</head>

<body>
   <div class="testone">SEOwhy7 demo one</div>
   <div class="testtwo">seowhy7 demo two</div>
   <div class="testthree">seowhy7 demo three</div>
</body>
</html>

       通过效果可以看出,3个div默认是由离我们更远的地方堆积走向离我们更近的地方,也就是先写的div在底下,后面写的div在上面。有时候需要调整这个叠放顺序,就需要用到z-index这个属性了,设置方法也很简单,数值可以是负数,数值较大的处于前面,离用户更近,反之同理,也比较好记忆。下面我们通过案例让第一个div(红色块)处于最上面,第二个绿色块处于中间,第三个蓝色块处于最下面,只需要在第一个div对应的css里面加入z-index,赋予相应的数值即可,案例中我们给testone增加z-index:1,给testtwo增加z-index:0,给testthree增加z-index:-1,其他代码部分跟上面的完全一样,这里就不贴出来了,直接看网页效果;

       还有一个堆叠效果需要特别说明,如果只给第一个div添加z-index属性值1,另外两个div留空,结果是第一个红色块处于最上层,离用户最近,第二个div(绿色块)处于最底层,第三个div(蓝色块)处于中间,说明不加z-index属性的时候是默认状态,而这个默认值是auto,显示的时候就是position的默认堆叠顺序,也就是z-index只对当前的div有效,其他的保持默认排序效果。这个知识点的代码与效果大家可以自行验证,理解会更加深刻。





返回列表 使用道具 举报
条评论
您需要登录后才可以回帖 登录 | 注册
高级
吴中生有 吴中生有 发表于 2017-05-19 14:55 | 阅读全部
感谢楼主分享
使用道具 举报
回复
落痕思 落痕思 发表于 2017-05-19 15:16 | 阅读全部
网页设计样式过程中有时候会让几个元素有堆积叠加的效果,也就是让指定的元素显示在前面还是后面的问题
使用道具 举报
回复
ZJ1912 ZJ1912 发表于 2017-05-19 16:22 | 阅读全部
感谢楼主分享
使用道具 举报
回复
星小火 星小火 发表于 2017-05-20 09:55 | 阅读全部
七街要做技术转型了么
使用道具 举报
回复
小七 小七 发表于 2017-05-20 14:42 | 阅读全部
星小火 发表于 2017-5-20 09:55
七街要做技术转型了么

这些是seo的周边知识,很多seo工作中多少会接触到,会一点对工作开展有帮助,即使是开源的cms,会一些样式,可以让页面变的更加美观
使用道具 举报
回复
我有我道 我有我道 发表于 2017-05-20 17:45 | 阅读全部
通过position定位,让其有叠加的效果,再通过z-index来控制堆叠顺序,让其中某个块显示在前面或者后面。第一次先不加z-index属性,只用position来定位3个div
使用道具 举报
回复
jsh花花 jsh花花 发表于 2017-08-30 15:47 | 阅读全部
很不错呦~~~
使用道具 举报
回复
相关推荐

您的等级不够,“高级会员” 开启