CSS【详解】层叠 z-index (含 z-index 的层叠规则,不同样式的层叠效果)

仅对已定位的元素( position:relativeposition:absoluteposition:fixed )有效,默认值为0,可以为负值。

z-index 的层叠规则

z-index 值从小到大层叠

兄弟元素

  • z-index 值相同时,后面的元素在前面的元素上面
    在这里插入图片描述
<template><div class="box demo1"></div><div class="box demo2"></div>
</template><style scoped>
.box {height: 60px;width: 60px;position: absolute;
}
.demo1 {/* z-index 默认为 0 */background-color: red;
}
.demo2 {/* z-index 默认为 0 */background-color: green;top: 20px;left: 20px;
}
</style>
  • z-index 值不同时,z-index 值较小的在下方

在这里插入图片描述

<template><div class="box demo1"></div><div class="box demo2"></div>
</template><style scoped>
.box {height: 60px;width: 60px;position: absolute;
}
.demo1 {background-color: red;z-index: 2;
}
.demo2 {/* z-index 默认为 0 */background-color: green;top: 20px;left: 20px;
}
</style>

父子元素

  • 子元素永远在父元素上面

  • 不同父元素里的子元素不能直接比较z-index,当父元素的z-index比较小时,子元素的 z-index无论多大都在下方 !

不同样式的层叠效果

从底部到顶部

  • background-color(永远是最底层)
  • background-image/border
  • 负 z-index
  • block 块状盒子
  • float 浮动盒子
  • inline/inline-block 内联元素/盒子
  • z-index:auto 或看成 z-index:0 的元素
  • 正 z-index

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/45686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python | setup.py里有什么?

setup.py里有什么&#xff1f; 文章目录 setup.py里有什么&#xff1f;C/C扩展总结gcc/g的编译参数&#xff1a;Windows Visual StudioCmakesetup.py C/C扩展模块 为什么需要分发打包&#xff1f;Distutils一个简单的例子通用的 Python 术语 使用 Setuptools 构建和分发软件包源…

Android Gantt View 安卓实现项目甘特图

需要做一个项目管理工具&#xff0c;其中使用到了甘特图。发现全网甘特图解决方案比较少&#xff0c;于是自动动手丰衣足食。 前面我用 Python和 Node.js 前端都做过&#xff0c;这次仅仅是移植到 Android上面。 其实甘特图非常简单&#xff0c;开发也不难&#xff0c;如果我…

Python番外篇:万法归一,一切皆对象

目录 Python中的对象 一切皆对象 数字是对象 字符串是对象 内置类型也是对象 函数和类也是对象 总结 Python中的对象 对象是Python对数据的抽象&#xff0c;在Python程序中&#xff0c;所有的数据&#xff0c;都可以由对象或对象之间的关系表示。 从某种意义上说&#…

基于AT89C51单片机GSM模块的家庭防火防盗报警系统设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机GSM模块的家庭防火防盗报警系统设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 摘 要 原理图 仿真图 元器件清单 代码 系统论文 参考文献 资源下载…

几何建模-Parasolid中GO功能使用

1.背景介绍 1.1 Parasolid和它的接口间关系 1.2 什么是GO GO全称是Graphical Output.你的程序需要在屏幕或者打印设备上显示模型数据时。在需要使用PK中的某个渲染函数时创建图形显示数据时&#xff0c;Parasolid会调用GO相关的函数。GO函数会输出绘图指令给你的应用程序提供…

《昇思25天学习打卡营第14天|SSD目标检测》

SSD&#xff08;Single Shot MultiBox Detector&#xff09;是一种用于目标检测的深度学习算法。它的设计旨在同时检测多个对象&#xff0c;并确定它们在图像中的位置和类别。与其他目标检测算法相比&#xff0c;SSD具有速度快和精度高的特点&#xff0c;在实时检测应用中非常受…

昇思25天学习打卡营第18天|MindNLP ChatGLM-6B StreamChat

现在各类chat AI不胜枚举&#xff0c;开源的闭源的都有&#xff0c;ChatGLM-6B是其中一个开源的chat AI模型&#xff0c;我们可以使用mindspore轻松的跑起来这个模型 官方提供的jupyter示例里面却少了安装mindnlp和mdtex2html&#xff0c;所以需要先把这两个模块安装一下。 !…

【Dison夏令营 Day 17】使用 Python Turtle 的 24 游戏求解器

24 点 是一个数学谜题&#xff0c;用基本算术运算符&#xff08;、-、、&#xff09;将 4 个数字运算成 24。例如&#xff0c;给定 4 个数字 1,5,5,5&#xff0c;我们可以得到表达式 (5-(15))5&#xff0c;等于 24。 我们可以用 Python 程序暴力解决这个问题。最多有 245444 7…

【游戏客户端】大话slg玩法架构(三)建筑控件

【游戏客户端】大话slg玩法架构&#xff08;三&#xff09;建筑控件 大家好&#xff0c;我是Lampard家杰~~ 今天我们继续给大家分享SLG玩法的实现架构&#xff0c;关于SLG玩法的介绍可以参考这篇上一篇文章&#xff1a;【游戏客户端】制作率土之滨Like玩法 PS&#xff1a;和之前…

谈谈软件交互设计

谈谈软件交互设计 交互设计的由来 交互设计(Interaction Design)这一概念,最初是由IDEO创始人之一Bill.Moggridge(莫格里奇)1984年在一次会议上提出。他设计了世界上第一台笔记本电脑Compass,并写作出版了在交互设计领域影响深远的《Designing Interactions》一书,被称…

请不要把「团队」二字挂在嘴边上

请不要把「团队」二字挂在嘴边上 什么是团队? 团队(Team)是由 基层和 管理层人员组成的一个 共同体,它合理利用每一个 成员的知识和技能协同工作,解决问题,达到 共同的目标。 团队的构成要素总结为5P,分别为目标、人、 定位、权限、计划。 群体不是团队 “团队”和“…

智能合约和分布式应用管理系统:技术革新与未来展望

引言 随着区块链技术的不断发展&#xff0c;智能合约和分布式应用&#xff08;DApps&#xff09;逐渐成为数字经济中的重要组成部分。智能合约是一种自执行的协议&#xff0c;能够在预设条件满足时自动执行代码&#xff0c;而无需人工干预或中介机构。这种自动化和信任机制极大…

使用Apache服务部署静态网站

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、网站服务程序 ​二、配置服务文件参数 ​三、SELinux安全子系统 四、个人用户主页功能 ​五、虚拟网站主机功能 六、Apache的访问控制…

nx上darknet的使用-目标检测-在python中的使用

1 内置的代码 在darknet中已经内置了两个py文件 darknet_video.py与darknet_images.py用法类似&#xff0c;都是改一改给的参数就行了&#xff0c;我们说一下几个关键的参数 input 要预测哪张图像weights 要使用哪个权重config_file 要使用哪个cfg文件data_file 要使用哪个da…

基于AT89C51单片机篮球计时计分器的设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机篮球计时计分器的设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 绪论 原理图 ​编辑 仿真图 系统总体设计图 代码实现 系统论文 资源下载 绪论 本次…

通用详情页的打造

背景介绍 大家都知道&#xff0c;详情页承载了站内的核心流量。它的量级到底有多大呢&#xff1f; 我们来看一下&#xff0c;日均播放次数数亿次&#xff0c;这么大的流量&#xff0c;其重要程度可想而知。 在这样一个页面&#xff0c;每一个功能都是大量业务的汇总点。 作为…

【Web开发手礼】探索Web开发的魅力(三)-html基础标签(3)

上述主要是对html标签的介绍和一些基本练习可以当作日常笔记收藏一下&#xff01;&#xff01;&#xff01; 目录 前言 html基础标签 前言 上述主要是对html标签的介绍和一些基本练习可以当作日常笔记收藏一下&#xff01;&#xff01;&#xff01; 提示&#xff1a;以下是本…

PostgreSQL 怎样处理数据仓库中维度表和事实表的关联性能?

文章目录 PostgreSQL 中维度表和事实表关联性能的处理 PostgreSQL 中维度表和事实表关联性能的处理 在数据仓库的领域中&#xff0c;PostgreSQL 作为一款强大的关系型数据库管理系统&#xff0c;对于处理维度表和事实表的关联性能是一个关键的问题。维度表和事实表的关联是数据…

【手写数据库内核组件】0301 动态内存池,频繁malloc/free让系统不堪重负,动态内存池让应用自由使用动态内存

动态内存管理 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 动态内存管…

RSA算法详解:万字文章详解RSA的加密与解密

本文目录 文章前言一、RSA的诞生1、加密算法的前世今生① 《六韬龙韬》中的阴符与阴书② 古罗马&#xff1a;凯撒密码③ 斯巴达&#xff1a;塞塔式密码&#xff08;Scytale&#xff09; 2、对称加密的脆弱性3、非对称加密算法的出现 二、RSA中的数学概念与定理1、质数理论2、关…