介绍

z-index 是用来设置 element 层次高低的 (当 element 重叠的时候)

参考:

4 reasons your z-index isn’t working (and how to fix it)

深入理解 CSS 属性 z-index

Z-index CSS Tutorial ( Position and Stacking Order )

Element 重叠时默认表现

先了解一下没有 z-index 时, CSS 默认的规则

假设有 2 个 div

  <body>

    <div class="div1">div1</div>

    <div class="div2">div2</div>

  </body>

div2 有 margin-top: -20px, 所以它们重叠了

.div1 {

  width: 100px;

  height: 100px;

  background-color: red;

}

.div2 {

  width: 100px;

  height: 100px;

  background-color: yellow;

  margin-top: -20px;

}

效果

div2 覆盖到了 div1 上面, 它是依据 HTML element 结构顺序, 越下方就越上层 (后来居上的原则). 注意这种情况下是无法使用 z-index 的, z-index 只能用在漂浮元素.

漂浮元素

同一个例子, 如果让 div1 浮起来, position: relative

.div1 {

  width: 100px;

  height: 100px;

  background-color: red;

  position: relative;

}

那么它就跑到上面了.

这是 CSS 默认的第 2 规则. 漂浮着比较高. 不只是 position: relation 会漂浮哦.

transform: translateZ(0); 也可以让它漂起来, 这是 Safari 常见的优化写法 (很多人 set 了之后就发现层次不对了, 就是这个原因).

z-index

z-index 只适用于 positioned element (或者说漂浮元素)

z-index 越大就越上层. default value 是 auto.

0 是一般 level, 1 或以上就表示想在上层, -1 通常是用来表示要比一般的 0 (没有设置的元素) 低层.

上面的例子, 当 div1,2 都是 relative 后, 如果想让 div1 在上层, 可以 set z-index: 1, 或者把 div2 set 成 z-index: -1.

.div1 {

  width: 100px;

  height: 100px;

  background-color: red;

  position: relative;

  z-index: 1;

}

.div2 {

  width: 100px;

  height: 100px;

  background-color: yellow;

  margin-top: -20px;

  position: relative;

  /* z-index: -1; */

}

小总结:

普通元素重贴, 看 HTML 顺序, 越下面越高层(被看见).

z-index 只对漂浮元素有效.

漂浮元素默认比普通元素高层(被看见)

漂浮元素 z-index: -1, 会低于普通元素.

漂浮对漂浮, 看 z-index 越大就高层(被看见), 平手的话再看 HTML 顺序.

Parent Limit Child z-index

child z-index 是会被 parent z-index 限制的.

比如 parent z-index: 0. child z-index: 100, 这个 100 只在 parent 内管用, 到了外面其余 element 1 也比它高 (因为 parant 是 0)

注: parent 如果完全没有 set z-index 那么就没有 limit.

这里给一个很常见的例子:

有个 section, 有大背景图, 上面有一个 call to action button

然后想加一层黑影到图片上去. 但是 call to action button 要保持可以被点击.

HTML 结构

  <body>

    <div class="container">

      <button class="button">call to action</button>

      <div class="overlay"></div>

    </div>

  </body>

CSS

.container {

  width: 300px;

  height: 300px;

  background-image: url(img/hero-bg.png);

  position: relative;

}

.button {

  padding: 10px;

}

.overlay {

  background-color: black;

  opacity: 0.7;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}

overlay 是 absolute 定位, 对准其 parent relative. 这样就把整个 parent 覆盖完了. 也包括了 parent 里面的 button

button 和 overlay 是 sibling. overlay 漂浮, 所以在 button 上层. button 就被挡住了.

要让 button 上来, 要嘛让它漂浮配上 z-index, 要不然就是让 overlay 往下沉.

overlay z-index: -1 就可以让它低于 button 了.

添加 -1 后很惊讶的发现, overlay 不见了. 原因是 -1 会让它比 parent 还低. 所以它跑到 parent background-image 的后面了.

上面有提到, parent 可以 limit z-index, 由于目前 parent 没有 set 任何 z-index, 所以 overlay -1 是可以越过 parent 的.

在 parent 设置 z-index: 0, 其实 set 什么都可以只要不是 auto (auto = 没有 set).

set 100 或 -100 效果都是一样的, 因为关键是它阻止了 child 出去, 没有出去也就不可能会比 parent 低了. 所以建议设置 0

冷知识 – Transform, Opacity 也会让元素飘起来

 

CSS – z-index的更多相关文章

  1. img和css背景的选择

    在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人), ...

  2. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  3. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  4. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  5. CSS定位（postion）和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  6. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  7. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  8. 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...

  9. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  10. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

随机推荐

  1. Mysql密码安全策略修改

    Mysql5.7默认有密码安全策略,密码安全级别要求比较高,在测试环境中使用起来不方便,本经验将介绍如何修改Mysql的密码安全策略,解决ERROR 1819错误. 1:首先使用root用户连接mys ...

  2. my-http-server 静态服务器源码学习实现缓存及压缩

    目录 一.准备工作及流程说明 二.配置命令行 三.设置入口文件和渲染模板 四.my-http-server源码 一.准备工作及流程说明 一看这标题,大家可能一下子没有反应过来,到底是要干什么?那么就先 ...

  3. 操作系统|SPOOLing（假脱机）技术

    什么是假脱机技术,它可以解决什么问题? 什么是脱机技术 要回答什么是假脱机技术,首先我们需要知道什么是脱机技术.<计算机操作系统(第四版)>写道: 为了解决人机矛盾及CPU和I/O设备之间 ...

  4. 使用uWSGI+nginx部署Django项目（Ubuntu）

    对于uwsgi+nginx的部署方式,它的访问关系大概是: 1 the web client <-> the web server <-> the socket <-&g ...

  5. ABC348

    A link 这道题就先输出整个的\(oox\),再输出剩一个两个的. 点击查看代码 #include<bits/stdc++.h> using namespace std; int n; ...

  6. ABC347

    A link 很简单 遍历,判断模\(k\)是否为\(0\),如果为\(0\),输出\(a_i/k\). 点击查看代码 #include<bits/stdc++.h> using name ...

  7. Git的存储原理

    目录 Git 设计原理 Git vs SVN Git 存储模型 .git 目录结构 Git 基本数据对象 Git 包文件 Git 引用 Git 设计原理 概括的讲,Git 就是一个基于快照的内容寻址文 ...

  8. docker redis集群实验

    集群redis 分片+高可用+负载均衡 master + slave{1..5} 一个挂了另一个顶上 通过脚本创建6个redis配置文件 [root@docker ~]# for port in $( ...

  9. 【Java】单号创建服务

    需求:ERP项目存在若干个业务功能,每个业务的单子的单号创建规则需要被统一规划 1.每个业务有自己对应的标识 2.业务单号必须以英文字母为前缀,长度在2 - 4个字符 3.单号的组成 = [ 前缀 ] ...

  10. 【Java】Collections 集合工具类

    Collections 集合工具类 - 操作Set.List.Map等集合的工具 - 提供了排序.查询.修改.操作,提供对对象设置不可变对集合容器对象实现同步控制等方法 排序操作: - static ...