介绍

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. PHP中引用的详解(引用计数、写时拷贝)

    转载:https://blog.csdn.net/ljguo212/article/details/8972865 1. PHP中引用的特性 PHP中引用意味着用不同的名字访问同一个变量内容,引用不是 ...

  2. [oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

    字体样式 回忆上次内容 \033 xm 可以改变字体样式 0m - 10m 之间设置的 都是字体效果 0m 复原 1m 变亮 2m 变暗     ​   添加图片注释,不超过 140 字(可选)   ...

  3. oeasy教您玩转vim - 12 - # 词头词尾

    词头词尾 回忆上节课内容 我们这次学了向前一个单词 w 意思是 word 还学习了向后一个单词 b 意思是 backward 这俩命令都落在单词的第一个字母 还有什么好玩的命令吗? 动手练习 我们可以 ...

  4. 深度解读GaussDB(for MySQL)与MySQL的COUNT查询并行优化策略

    本文分享自华为云社区<[华为云MySQL技术专栏]GaussDB(for MySQL)与MySQL的COUNT查询并行优化策略>,作者:GaussDB 数据库. 1.背景介绍 统计表的行数 ...

  5. 简单聊聊WebDAV

    1.什么是WebDAV? WebDAV是一种基于HTTP协议的扩展,旨在提供在Web服务器上进行文件管理的标准化解决方案.它允许用户通过网络对远程主机上的文件进行读写.编辑和删除操作.与传统的HTTP ...

  6. stable diffusion 入门教程

    sd基础 工作原理&入门 输入提示词后 有文本编码器将提示词编译成特征向量,vae编码器将特征向量传入潜空间内,特征向量在潜空间内不断降噪,最后通过vae解码器将降噪之后的特征向量 解码成一个 ...

  7. top的wa，mpstat的%iowait以及pidstat的%wait

    top的wa,mpstat的%iowait以及pidstat的%wait pidstat 中, %wait 表示进程等待 CPU 的时间百分比.等待 CPU 的进程已经在 CPU 的就绪队列中,处于运 ...

  8. BI 工具如何助力市政设计公司实现数字化转型？

    一.前言 近年来,国家出台多个政策文件来鼓励和发展数字化和智能化,如<十四五规划>提出要推进产业数字化转型.<交通强国建设纲要>提出要大力发展智慧交通.上海市发布的<关于 ...

  9. A* 算法、PathFinding问题中的 allow diagonal 和 don't cross corners，以及 .map文件格式（续）

    前文: A* 算法.PathFinding问题中的 allow diagonal 和 don't cross corners,以及 .map文件格式 上篇讲了些关于地图文件 .map 的介绍,本文主要 ...

  10. 2024年 智能机器人元年 —— 国内的智能机器人（humanoid）公司当下最大的压力（最为急迫的任务）是什么？

    可以说,2024年是人形机器人的元年.我国在去年年底将发展智能机器人立为了第一线的重要科技发展方向,并计划在2024年.2025年建立出完整的产业链条,并培育出几家成熟的行业领先的智能机器人公司.而我 ...