【CSS】重新认识z-index

最新推荐文章于 2022-11-11 03:08:11 发布
最新推荐文章于 2022-11-11 03:08:11 发布
阅读量196 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45812488/article/details/125339130
本文深入探讨了CSS中的z-index属性，解释了层叠上下文的概念，以及如何通过设置z-index创建新的层叠上下文。内容包括层叠顺序的规则，如背景、边框、定位元素等的层级关系，并详细阐述了z-index的取值和应用条件，如只有定位元素才能设置z-index。此外，还强调了当z-index值相同时，后面的元素会覆盖前面的元素，以及父元素z-index对子元素的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

z-index

取值

数字无单位

  • auto(默认)和其父元素一样的层叠等级

  • 整数

  • inherit继承

层叠上下文和层叠等级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54LXXTGy-1655465244656)(assets/graphical-z-index.gif)]

对每一个网页来说，默认创建一个层叠上下文(可类比一张桌子)，这个桌子就是html元素，html元素的所有子元素都位于这个默认层叠上下文中的某个层叠等级(类似于桌子上放了一个盆儿，盆上放了一个果盘，果盘上放了一个水杯……)

将元素的z-index属性设置为非auto时，会创建一个新的层叠上下文，它及其包含的层叠等级独立于其他层叠上下文和层叠等级(类似于搬了一张新桌子过来，和旧桌子完全独立)

层叠顺序

div默认在html之上，及div的层级高于html

一个层叠上下文可能出现7个层叠等级，从低到高排列为

  1. 背景和边框
  2. z-index为负数
  3. block盒模型(位于正常文档流，块级，非定位)
  4. float盒模型(浮动，非定位)
  5. inline盒模型(位于正常文档流，内联，非定位)
  6. z-index=0
  7. z-index为正数(数值越大越靠上方)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zftzFB9B-1655465244657)(assets/640.png)]

压盖顺序

自定义压盖顺序：使用属性z-index

  • 只有定位元素(position属性明确设置为absolute、fixed或relative)可使用z-index

  • 如果z-index值相同，html结果在后面的压盖住在前面的

  • 父子都有z-index，父亲z-index数值小时，儿子数值再大没用

CSS3笔记之定位篇（二）z-index，Web前端源码剖析之Framwork层消息传递
m0_61042126的博客
04-17 445
background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block。background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block。–> z-index:auto或z-index:0，不依赖z-index的层叠上下文 --> 正z-index。–> z-index:auto或z-index:0 --> 正z-index。
css：z-index为0和auto的区别
m0_63142119的博客
12-10 1073
css：z-index为0和auto的区别 欢迎大佬斧正~
z-index详解
lan128lan的博客
04-11 1784
前端学习笔记之Z-index详解 阅读目录 z-index 基础 层叠上下文和层叠层 层叠次序 综合总结 结论 参考 CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。 CSS为盒模型的布局提供了三种不同的定位方案...
CSS 之 z-index 属性详解
热门推荐
weixin_45092437的博客
08-26 7万+
`z-index`属性是用来设置元素的堆叠顺序或者叫做元素层级，`z-index`的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。 当父元素设置了`z-index`属性时，子元素的`z-index`属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的`z-index`属性值为准进行对比，子元素本身的`z-index`属性值无效。...
z-index:0与z-index:auto的区别
Lhy_JL的博客
02-22 491
区别： z-index: 0 会创建一个新的层叠上下文 z-index: auto 不会去创建 z-index: 0 会在 z-index: auto 遵守后来者居上层叠 <head> <style> .parent{ position: relative; width: 300px; height: 300px; border: 1px solid #4c4c4c; } .box1,.box2,.b
搞懂Z-index的所有细节
极客神殿
05-19 384
用z-index来改变堆叠顺序 z-index测试网站 一 z-index 在什么情况下才生效？ z-index的运用是需要条件的,与其相关的属性就是position属性。我们以三个div来举例子。 position: static; 当三个div的position都为static时,我们把div(A)的z-index设置为15, 把div(B)的z-index设置为10,把div©的z-index设置为5。 发现div(B)依然把div(A)的一部分挡住了,所以当position为static时,.
CSS z-index 层级关系优先级的概念
12-13
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
为什么qss不认识z-index
03-14
我可以回答这个问题。qss是Qt Style Sheets的缩写，它是一种用于定义Qt应用程序界面外观的样式表语言。而z-index是CSS中用于控制元素...虽然qss和CSS有些相似，但它们并不完全相同，因此qss不认识z-index是很正常的。
子元素不继承z-index
最新发布
03-08
当处理层叠上下文时，重要的是要认识到 `z-index` 只适用于具有定位（即设置了 `position` 属性）的元素[^1]。子元素默认情况下并不会直接继承父元素的 `z-index` 值；相反，它们会在同一个堆栈环境中按照自身的 `z-...
z-index:0 与 z-index:auto(默认值)是有区别的
ISaiSai的专栏
08-28 1万+
z-index:0 的会创建一个新的层叠上下文 而auto 不会，两者在有区别 （0 会在auto 上面）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="abc"> <span class="red2">Red2</spa
CSS深入理解之z-index
muzi187的博客
01-02 705
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之z-index Z-index 一、Z-index基础 1、z-index属性指定了元素及其子元素的z顺序 ，而z顺序 可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较小z-index值的元素。 2、属性值： （1）z-index:auto;   默认值 （2）z-in
z-index 的最大值和最小值
javahellohahaha的博客
11-11 2956
请说说z-index最大值和最小值分别可以设置为多少？
定位中fixed的z-index：999；和z-index：0的效果
github_36629330的博客
11-23 3972
1、常用的下拉，固定不动的用法，经常用于导航栏的问题2、下拉，向上覆盖的效果
css3中的z-index
冰雪为融的博客
07-05 9828
元素的层叠黄金准则：1）、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个2）】后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素定位元素与传统层叠上下文对于position值为relative/absolute以及firfox/IE浏览器（不包括Chrome浏览器）下含有...
CSS 中的z-index属性
Min的博客
07-24 1万+
z-index z-index ：auto|&lt;integer&gt;      auto 默认值    定义：一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。 适用于：定位元素。即定义了position为非static的元素 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。 1、同一层叠上下文 层叠级别大的显示在上...
CSS中z-index:0 与 z-index:auto的区别
daydayup的博客
10-21 2919
z-index:0 与 z-index:auto的区别 区别: z-index: 0 会创建一个新的层叠上下文 z-index: auto 不会去创建 z-index: 0 会在 z-index: 上面 代码演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .red,.blue{ widt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值