层叠上下文: 三维概念,表示元素在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. Swing-JRadioButton用法-入门

    JRadioButton是Swing中的单选框.所谓单选框是指,在同一个组内虽然有多个单选框存在,然而同一时刻只能有一个单选框处于选中状态.它就像收音机的按钮,按下一个时此前被按下的会自动弹起,故因此 ...

  2. geyear和getfullyear的区别

    getYear(),IE中获得正确年份,但有的浏览器获取的是当前年份-1900的值.而IE是当大于2000时,直接加上1900 getFullYear(),都是可以获得正确年份. 所以建议使用getF ...

  3. JSP页面格式化数字或时间 基于jstl的

    jsp页面格式化数字或时间 转载自: http://blog.csdn.net/hakunamatata2008/archive/2011/01/21/6156203.aspx Tags fmt:re ...

  4. Java简单实用方法一

    整理以前的笔记,在学习Java时候,经常会用到一些方法.虽然简单但是经常使用.因此做成笔记,方便以后查阅 这篇博文先说明构造和使用这些方法. 1,判断String类型数据是否为空 String类型的数 ...

  5. 详解 HTTPS 移动端对称加密套件优

    近几年,Google.Baidu.Facebook 等互联网巨头大力推行 HTTPS,国内外的大型互联网公司很多也都已启用全站 HTTPS. Google 也推出了针对移动端优化的新型加密套件 Cha ...

  6. SQL Server 2016 Alwayson新增功能

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/ 概述 SQLServer2016发布版本到现在已有一年多的时间了,目前最新的稳定版本是SP1版本.接下来就开看看2016在Alw ...

  7. js特效遮罩层（弹出层）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. Nginx学习——Nginx启动、停止、重启和信号控制以及平滑升级

    1.Nginx 启动与停止 (1)启动方式 启动格式:Nginx可执行文件地址 -c Nginx配置文件地址 /etc/local/nginx/sbin/nginx -c /root/dufy/ngi ...

  9. Nginx学习——Nginx简单介绍和Linux环境下的安装

    一:Nginx的简介 百科百科:Nginx Nginx 是一个俄罗斯的哥们开发的,并将其进行了开源. Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器, ...

  10. mysql用户权限配置

    创建管理员: mysqladmin -u root password 123456 登录 mysql -u root -p 建库及授权 > create database bdp charact ...