资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css层叠与z-index的使用示例

这篇文章主要介绍了css层叠与z-index的使用示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联专注于洪泽网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供洪泽营销型网站建设，洪泽网站制作、洪泽网页设计、洪泽网站官网定制、重庆小程序开发公司服务，打造洪泽网络公司原创品牌,更为您提供洪泽网站排名全网营销落地服务。

层叠与层叠等级

HTML 元素是一个三维的概念，除了水平和垂直方向外，还会在“z 轴”上层层叠加。
既然是叠加，就会涉及到先后顺序的问题，规范中称之为“层叠等级”。
默认情况下，图文是网页的核心，因此内联元素的等级理应最高；然后是布局，其中浮动元素（脱离文档流）的等级高于块级元素；最低等级是设置背景、边框等装饰属性的元素。

css层叠与z-index的使用示例

例子：




    
    

    

css层叠与z-index的使用示例

如果元素发生了层叠，层叠等级大的会覆盖小的；如果二者层叠等级相同，根据渲染的顺序，后者会覆盖前者。

例子：




    

    

css层叠与z-index的使用示例

z-index 可以影响层叠等级

如果需要修改元素的层叠等级，可以在已定位的元素(1)上使用 z-index。

z-index 可以取正整数，0 或负整数；如果没有 z-index （默认 z-index:auto ）或者 z-index 手动设置为 auto，则视为 0 处理。

*(1)指 position 值为 relative、absolute 或 fixed 的元素。

css层叠与z-index的使用示例

例子：




    
    

    

z-index 取正整数，0 或 auto 时：

css层叠与z-index的使用示例

z-index 取负整数时：

css层叠与z-index的使用示例

细心的人可能会发现，在例子中，我们为装饰元素（类名 f）设置了定位属性，并且 z-index 设置为 0。如果不这样设置，当元素（蓝色背景的测试元素） z-index 取负整数时，就会跑到装饰元素的后面。有关于这一点，后面“z-index 取负整数值”会讲到。

z-index 与层叠上下文

z-index 可以影响层叠等级，但有个前提条件非常重要，就是参与比较的元素必须在同一个层面上，规范中称之为“层叠上下文”。“上下文”说明这是一块封闭的区域，区域内的子元素不会影响到外部元素；而“层叠”，则意味着只要元素创建这个区域，就会在“z轴”上高于当前上下文。
层叠上下文可以通过一些 CSS 属性创建，常见的属性如下：

*(1)虽说 z-index:auto 和 z-index:0 可以看成是一样 ，但 z-index: auto 所在的元素只是一个普通定位元素，而 z-index:0 会创建一个层叠上下文。两者等级相同，后者将覆盖前者。

实际工作中，很少使用 CSS3 新属性去主动创建层叠上下文，因此，创建层叠上下文最常用的方法是，给定位元素设置 z-index 整数值。
前面介绍过，z-index 可以修改元素在当前层叠上下文中的层叠等级，现在 z-index 又有了另一层含义，即创建一个新的层叠上下文。
下面，通过例子来更好的理解层叠上下文：

例子：



#1
    
#3
    


#2
    
#4
    

css层叠与z-index的使用示例

例子中，没有元素设置 z-index 值，此时 z-index 就是默认的 auto，因此，元素按照渲染顺序，后者覆盖前者。
如果为#3、#4设置正的 z-index 值，如下：

.f_1>div {
    z-index: 1;
}

.f_2>div {
    z-index: 2;
}

css层叠与z-index的使用示例

此时，父元素#1、#2并没有设置 z-index 值，因此它们不会创建新的层叠上下文，这意味着#3、#4仍然同属于根层叠上下文。
同一层叠上下文，层叠等级大的会覆盖小的，所以#4在所有元素之上。
现在为#2、#3、#4设置 z-index 值，如下：

.f_1>div {
    z-index: 2;
}

.f_2 {
    z-index: 1;
}

.f_2>div {
    z-index: 9;
}

css层叠与z-index的使用示例

尽管#4的 z-index 值大于#3的，但由于#4属于#2的子元素，其层叠等级完全受制于#2的等级。#2和#3同属于根层叠上下文，且#3大于#2，因此#3在#2（及其子元素）之上。

z-index 取负整数值

常规理解 z-index 取负值，应该会跑到背景色的后面：

例子：




    

css层叠与z-index的使用示例

实际工作中， z-index 取负值可以实现隐藏元素的效果。但如果为父元素创建层叠上下文，子元素就会隐藏不掉：

例子：




    

css层叠与z-index的使用示例

前后例子对比之后，已经很明显的表明，不管 z-index 的负值多大，依然无法突破当前层叠上下文。

感谢你能够认真阅读完这篇文章，希望小编分享的“css层叠与z-index的使用示例”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


文章题目：css层叠与z-index的使用示例
分享地址：http://cdkjz.cn/article/jccipi.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
网站建设绵阳托管服务器主动防护网眉山服务器租用蓬溪网站建设中国（西部）云计算中心成都广告制作高端定制网站设计成都微信公众号开发成都网站优化

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图