请选择 进入手机版 | 继续访问电脑版
  • 注册
  • 登录
*本站广告为第三方自助投放。发生纠纷,向本站索取第三方联系方式沟通。

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

小七 发表于 2017-05-1812:58 显示全部楼层 阅读模式
+1
8146°C
7
  • 吴中生有
  • 落痕思
  • ZJ1912
  • 星小火
  • 小七
过: 他们
       网页设计样式过程中有时候会让几个元素有堆积叠加的效果,也就是让指定的元素显示在前面还是后面的问题,这个用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有效,其他的保持默认排序效果。这个知识点的代码与效果大家可以自行验证,理解会更加深刻。
7 条评论
您需要登录后才可以评论 | 注册
吴中生有 发表于 2017-05-1914:55 显示全部楼层
感谢楼主分享
落痕思 发表于 2017-05-1915:16 显示全部楼层
网页设计样式过程中有时候会让几个元素有堆积叠加的效果,也就是让指定的元素显示在前面还是后面的问题
ZJ1912 发表于 2017-05-1916:22 显示全部楼层
感谢楼主分享
星小火 发表于 2017-05-2009:55 显示全部楼层
七街要做技术转型了么
楼主 小七 发表于 2017-05-2014:42 显示全部楼层
星小火 发表于 2017-5-20 09:55
七街要做技术转型了么

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

小七 官方

头衔 : 起个好听的头衔

签名 : 一句话描述自己