层叠上下文: 三维概念,表示元素在Z轴的位置

层叠可嵌套,组合成一个分层次上下文
  每个层叠上下文和兄弟元素独立,进行层叠变化或渲染时,只考虑后代元素
  每个层叠上下是自成体系的

层叠顺序

1 background~border
2 负z-index
3 block盒子
4 float浮动盒子
5 inline/inline-block盒子
6 z-index:auto/z-index:0
7 正z-index

特性

支持负值
  支持 CSS3 动画
  css2.1中需要和定位元素一起使用
  如定位元素 z-index 发生嵌套: 后来居上的准则,哪个大哪个上
  如发生嵌套: 祖先优先原则,前提 z-index 是数值而非 auto , auto 不创建层叠上下文

运用

定位元素默认 z-index: auto; /z-index: 0
  z-index 不为 auto 的定位元素,会创建层叠上下文
  z-index 层叠顺序的比较止步于父级层叠上下文
  避免 z-index 嵌套层级关系混乱
  避免 z-index 混乱,一闪比一山高的样式问题
  可利用负值,作隐藏

CSS之 z-index 属性的更多相关文章

  1. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  2. css的五种属性值----在路上（21）

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  3. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  4. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  5. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  6. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  7. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  8. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  9. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  10. css中的列表属性

    list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...

随机推荐

  1. 【Beta阶段】计划安排

    一.新成员介绍 姓名    陈雄 学号    106 角色    前端 个人相片     二.完善功能 登录注册 记分板 排行榜 界面优化 三.新增功能 换肤(可以一试) 联网PK 分享邀请 四.团队 ...

  2. 201521145048《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 1.2 List<Map.Entry<String, In ...

  3. 201521123037 《Java程序设计》第2周学习总结

    1. 本周学习总结 初步学会分析使用命令提示符进行编译的命令 了解使用import引入不同包的类 学会码云与eclipse的连接 使用Array和String函数编写程序 2. 书面作业 1. 使用E ...

  4. 201521123011 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 协议.IP.域名.端口: 常用应用层协议:http, ftp 域名(通过域名可以找到IP)用ping测试 ...

  5. php数据库操作小要点

    保留小数点后两位 $ba = floor(($v[2]/$sum[0][0])*10000); //取整数 $bb = $ba/100; //两位小数 列的值加一可以直接用自身,不用单独查询出来 $s ...

  6. python之路模块与包

    一.import加载的模块分为四个通用类别:          1 使用python编写的代码(.py文件) 2 已被编译为共享库或DLL的C或C++扩展 3 包好一组模块的包 4 使用C编写并链接到 ...

  7. Spring第九篇【Spring与Hibernate整合】

    前言 前面已经学习了如何使用Spring与Struts2进行整合,本博文主要讲解如何使用Spring对Hibernate进行整合 Spring和Hibernate整合的关键点: SessionFact ...

  8. Akka（26）： Stream：异常处理-Exception handling

    akka-stream是基于Actor模式的,所以也继承了Actor模式的“坚韧性(resilient)”特点,在任何异常情况下都有某种整体统一的异常处理策略和具体实施方式.在akka-stream的 ...

  9. 爬虫实战：爬虫之 web 自动化终极杀手 ( 上）

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:陈象 导语: 最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路.本次爬虫内容有:静态页面的爬 ...

  10. vue+element搭建的后台管理系统

    最近工作不是很忙,自己在学习vue,在网上找了一个简单的项目练练手..... 这是本人的gitHub 上的项目地址:https://github.com/shixiaoyanyan/vue-admin ...