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,一经查实,立即删除!

相关文章

【GameFramework框架】7-2、GameFramework框架是否“过度设计”?

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群:398291828大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录: https://blog.csdn.net/q764424567/article/details/1…

Leetcode(经典题)day1

删除有序数组中的重复项|| 80. 删除有序数组中的重复项 II - 力扣&#xff08;LeetCode&#xff09; 和之前的删除有序数组中的重复项|相似&#xff0c;这里是要求最多出现两次&#xff0c;所以多加一个变量来记录出现次数即可&#xff0c;整体上还是使用双指针&#xff0c;…

智能小车——底层配置

需要一点点思考底层的相关配置都需要完成怎么样的配置&#xff0c;并进一步添加相关的状态机和控制算法。 FreeRTOS迁移 可以直接CubeMX生成&#xff0c;也可以手动把FreeRTOS的源码拖到工程中&#xff0c;然后再稍微配置一下&#xff0c;这个之前学正点原子的FreeRTOS的时候…

python | setup.py里有什么?

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

华为OD机试题-字符串重新排列

题目描述 https://www.cnblogs.com/smile-programmer/p/17322920.html 字符串重新排列 给定一个字符串s&#xff0c;s包括以空格分隔的若干个单词&#xff0c;请对s进行如下处理后输出&#xff1a; 1、单词内部调整&#xff1a;对每个单词字母重新按字典序排序 2、单词间顺序调…

C#单独摘出日期的某天

如果你想要在 C# 中获取日期中的“天”的部分&#xff0c;你可以通过将日期转换为字符串&#xff0c;解析字符串&#xff0c;或者使用 DateTime 结构的 Day 属性来实现。 using System;class Program {static void Main(){// 获取当前日期DateTime today DateTime.Today;// 使…

Sqlmap中文使用手册 - Request模块参数使用

目录 1. Request模块的帮助文档2. 各个参数的介绍2.1 --methodMETHOD2.2 --dataDATA2.3 指定参数分割符2.4 -cookie相关2.5 -agent相关2.6 --hostHOST2.7 --refererREFERER2.8 --headersHEADERS2.9 --auth-type / --auth-cred2.10 --auth-fileAUTH2.11 --ignore-codeIG2.12 --p…

基于Flask+Apache+WSGI等模块配置Deep Learning应用功能网站(Ubuntu 22.04服务器)

首先预设你已经在本地搭建好了网站&#xff0c;只需要放到服务器上&#xff0c;然后配置Apache / Nginx等反向代理软件&#xff0c;即可用服务器ip地址/域名进行访问。 因为操作不规范/坑太多&#xff0c;而反反复复配了至少10遍。接下来的教程主要是总结规范流程&#xff0c;…

PYTHON自学笔记(二)查漏补缺

迭代 字符串处理 函数 参数 必须参数&#xff08;必须有序&#xff09; 调用函数与生命函数的参数个数必须一样&#xff0c;否则报错 关键字参数&#xff08;无需有序&#xff09; 在调用函数的时候可以直接传参&#xff0c;方便测试 def printIfo(name, **var):print(…

Stable Diffusion 入门案例教程

Stable Diffusion 是一种基于 diffusion-based 的生成模型&#xff0c;可以生成高质量的图像和视频。下面是一个 Stable Diffusion 入门案例教程&#xff0c;旨在帮助您快速入门 Stable Diffusion。 安装 Stable Diffusion 首先&#xff0c;您需要安装 Stable Diffusion。可以…

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;如果有资源方面的需要可以联系我。 目录 摘 要 原理图 仿真图 元器件清单 代码 系统论文 参考文献 资源下载…

Memcached内存碎片清理术:优化缓存性能的策略

标题&#xff1a;Memcached内存碎片清理术&#xff1a;优化缓存性能的策略 内存碎片是Memcached在长期运行过程中常见的问题&#xff0c;它会降低缓存效率并影响性能。作为高效的分布式内存缓存系统&#xff0c;Memcached提供了多种内存碎片整理策略。本文将详细介绍这些策略&…

几何建模-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;在实时检测应用中非常受…

层次分析法:matlab代码实现

计算权重&#xff1a; 一、算术平均法 关于矩阵&#xff1a; 1、矩阵的输入写法 [ ; ; ]同行用空格或逗号隔开&#xff0c;不同行用分号间隔 2、矩阵求和 默认按列求和 asum(E) 等同于 asum(E,1) 得到行向量 按行求和 asum(E,2) 得到列向量 对整个矩阵求和 asum(E,"all&…

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

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

Python实战指南:一键解锁KimiGPT API,开启智能对话与文本生成的新纪元

Python实战指南&#xff1a;一键解锁KimiGPT API&#xff0c;开启智能对话与文本生成的新纪元 引言 随着人工智能技术的飞速发展&#xff0c;自然语言处理&#xff08;NLP&#xff09;成为了众多领域的核心技术之一。KimiGPT&#xff0c;作为国内广受欢迎的AI工具&#xff0c…

【/etc/profile、~/.bashrc、~/.bash_profile区别以及配置history记录】

目录 /etc/profile、~/.bashrc、~/.bash_profile区别/etc/profile~/.bash_profile~/.bashrc加载顺序和关系示例/etc/profile~/.bash_profile&#xff08;用户级别&#xff09;~/.bashrc&#xff08;用户级别&#xff09; history记录配置修改 /etc/profile确保用户的 ~/.bash_p…