当前位置：首页 > news >正文

CSS|14 z-index

news 来源：原创 2025/5/28 3:14:20

z-index

z-index表示谁压盖着谁，数值大的会压盖住数值小的。
只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的元素，才会拥有z-index
z-index的值是没有单位的，值是一个正整数，默认的z-index值是0
如果多个定位元素没有设置z-index属性，或者z-index设置一样，那么卸载HTML后面的定位元素就会压盖住前面的定位元素

案例一：z-index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>z-index</title><style type="text/css">div{width: 200px;height: 200px;}/*.div1和.div2都设置了绝对定位，所以他们就是拥有了z-index属性，但是并没有给其设置z-index属性，那么他们的值就是0。我们观察HTML中的结构.div2这个元素它写在.div1前面，然后就能知道.div2会压盖住.div1*/.div1{background-color: #f00;/*绝对定位*/position: absolute;left: 100px;top: 100px;}.div2{background-color: #00f;/*绝对定位*/position: absolute;left: 200px;top: 200px;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

.div1和.div2都设置了绝对定位，所以他们就是拥有了z-index属性，但是并没有给其设置z-index属性，那么他们的值就是0。
我们观察HTML中的结构.div2这个元素它写在.div1前面，然后就能知道.div2会压盖住.div1
在这里插入图片描述

案例二：设置z-index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置z-index</title><style type="text/css">div{width: 200px;height: 200px;}/*不设置z-index，应该是div2遮住div1，因为在HTML结构中div2写在后面，默认z-index都是0设置z-index后，数值大的显示在上面，所以是div1遮住div2*/.div1{background-color: #f00;/*绝对定位*/position: absolute;left: 100px;top: 100px;z-index: 2;}.div2{background-color: #00f;/*绝对定位*/position: absolute;left: 200px;top: 200px;z-index: 1;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

不设置z-index，应该是div2遮住div1，因为在HTML结构中div2写在后面，默认z-index都是0
设置z-index后，数值大的显示在上面，所以是div1遮住div2
在这里插入图片描述

案例三：z-index属性在工作中使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>z-index属性在工作中使用</title><style type="text/css">*{margin: 0;padding: 0;}.nav{width: 100%;height: 60px;background-color: #222222;/*使用固定定位*/position: fixed;left: 0px;top: 0px;/*设置z-index*//*不设置z-index的话，下面的p标签的内容会遮挡住导航栏*/z-index: 99999999;}.nav .inner_c{width: 1000px;height: 60px;margin: 0px auto;background-color: #f00;}ul{/*清除无序列表前面的项目符号*/list-style: none;}ul li{/*左浮动*/float: left;width: 100px;height: 60px;line-height: 60px;text-align: center;}ul li a{display: block;width: 100px;height: 60px;text-decoration: none;color: white;font-weight: bold;}ul li a:hover{background-color: gold;}body{padding-top: 60px;}p{width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: #f00;/*相对定位*/position: relative;}</style>
</head>
<body><div class="nav"><div class="inner_c"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div></div><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt=""><p>看看我在哪里</p><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt="">
</body>
</html>

在这里插入图片描述

CSS|14 z-index

z-index z-index表示谁压盖着谁，数值大的会压盖住数值小的。只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的元素，才会拥有z-indexz-index的值是没有单位的，值是一个正整数，默认的z-index值…...

编程日记 2025/5/28 3:14:20

Elasticsearch：使用 Open Crawler 和 semantic text 进行语义搜索

作者：来自 Elastic Jeff Vestal 了解如何使用开放爬虫与 semantic text 字段结合来轻松抓取网站并使其可进行语义搜索。 Elastic Open Crawler 演练我们在这里要做什么？ Elastic Open Crawler 是 Elastic 托管爬虫的后继者。 Semantic text 是 Elasti…...

编程日记 2025/5/23 0:32:48

【潜意识Java】深度解析黑马项目《苍穹外卖》与蓝桥杯算法的结合问题

目录为什么要结合项目与算法？ 1. 蓝桥杯与《苍穹外卖》项目的结合实例：基于蓝桥杯算法思想的订单配送路径规划问题描述： 代码实现：使用动态规划解决旅行商问题代码解析： 为什么这个题目与蓝桥杯相关&#x…...

编程日记 2025/5/28 2:22:52

powershell基础(1)

powershell基础(1) 1. 安装PowerShell 首先，确保你的计算机上已经安装了PowerShell。对于Windows 10及更高版本，PowerShell通常是默认安装的。你也可以从微软官网下载并安装最新版本的PowerShell Core。 2. 打开PowerShell 在Windows搜索栏中输入“P…...

编程日记 2025/5/27 7:42:42

国标GB28181协议平台Liveweb:搭建建筑工地无线视频联网监控系统方案

随着科技高速发展，视频信号经过数字压缩，通过互联网宽带或者移动4G网络传递，可实现远程视频监控功能。将这一功能运用于施工现场安全管理，势必会大大提高管理效率，提升监管层次。而这些，通过Liveweb监控系统…...

编程日记 2025/5/26 21:22:35

踩准智能汽车+机器人两大风口，速腾聚创AI+机器人应用双线爆发

日前，RoboSense速腾聚创交出了一份亮眼的Q3财报。受到多重利好消息影响，其股价也应势连续大涨。截止12月9日发稿前，速腾聚创股价近一个月内累计涨幅已超88%。财务数据方面，速腾聚创在今年前三季度实现总收入约11.3亿元&#xff0…...

编程日记 2025/5/27 9:51:56

本地maven项目打包部署到maven远程私库

目的：在自己的maven项目中，要把当前maven项目部署到maven私库，供其他人引入依赖使用。首先要确保你当前能访问到你的私库，能拉私库的maven依赖即可。 maven部署命令： mvn deploy:deploy-file -Dmaven.test.skiptrue -…...

编程日记 2025/5/24 7:05:49

青少年编程与数学 02-004 Go语言Web编程 14课题、数据操作

青少年编程与数学 02-004 Go语言Web编程 14课题、数据操作一、数据操作二、CRUD说明： 三、数据验证为什么需要数据验证？Go Web应用中的数据验证示例步骤 1: 定义订单结构体步骤 2: 实现验证逻辑步骤 3: 在HTTP处理函数中使用验证四、数据格式化什么是数…...

编程日记 2025/5/27 17:40:15

Java 中 ConcurrentHashMap 和 HashMap 能存 null 吗？深挖原理和使用场景

前言当你使用 HashMap 或 ConcurrentHashMap 时，可能会冒出一个经典问题：它们能存储 null 键或 null 值吗？ 初学者可能觉得无所谓，试一下不就知道了，但在真实项目中，这个问题可能导致严重的 bug。今天我们…...

编程日记 2025/5/25 7:43:00

【JavaWeb后端学习笔记】Spring Task实现定时任务处理

Spring Task是Spring框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。主要的应用场景有：纪念日提醒，处理订单未支付，还款提醒等。 1、corn表达式使用Spring Task首先需要了解corn表达式，通过cor…...

编程日记 2025/5/27 10:53:06

【CSS in Depth 2 精译_087】14.4：CSS 中的浮动特效以及在文字环绕中的应用 + 14.5：本章小结

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分视觉增强技术 ✔️【第 14 章蒙版、形状与剪切】 ✔️ 14.1 滤镜 14.1.1 滤镜的类型14.1.2 背景滤镜 14.2 蒙版 14.2.1 带渐变效果的蒙版特效14.2.2 基于亮度来定义蒙版14.2.3 其他蒙版属…...

编程日记 2025/5/25 4:41:08

探索 Python编程调试案例：计算小程序中修复偶数的bug

在学习Python 编程的过程里，会遇到各种各样的bug。而修复bug调试代码就像是一场充满挑战的侦探游戏。每一个隐藏的 bug 都是谜题，等待开发者去揭开真相，让程序可以顺利运行。今天，让我们通过一个实际案例，深入探索 Py…...

编程日记 2025/5/27 23:36:28

探索 CI/CD 工具的力量

CI/CD 工具是什么？ CI/CD 工具是开发者的“生产力加速器”。它通过自动化代码构建、测试、部署等流程，消除了繁琐的手动操作，确保开发和运维的无缝衔接。借助这些工具，开发者不仅能够更快地发布产品，还能更早发现问题…...

编程日记 2025/5/24 10:31:02

MySQL和Oracle的区别

MySQL和Oracle的区别 MySQL是轻量型数据库，并且免费，没有服务恢复数据。 Oracle是重量型数据库，收费，Oracle公司对Oracle数据库有任何服务。 1.对事务的提交 MySQL默认是自动提交，而Oracle默认不自动提交&#xff0…...

编程日记 2025/5/27 7:46:54

亚马逊云科技 re:Invent 2024重磅发布！Amazon Bedrock Data Automation 预览版震撼登场

AWS re:Invent 2024 已圆满落幕！ 在本次大会中，隆重推出了一项全新功能： Amazon Bedrock Data Automation（预览版）震撼登场！ New Amazon Bedrock capabilities enhance data processing and retrieval | …...

编程日记 2025/5/24 14:07:10

SQL语句练习

阅读《SQL必知必会》（第五版）然后结合往常表做的练习记录这里使用的数据库时sqlite3,使用的工具时navicat 表资源链接https://wenku.baidu.com/view/349fb3639b6648d7c1c74652.html 表录入后如上图所示。后面如果有多张表之间的操作，在引入…...

编程日记 2025/5/27 7:55:12

保姆级教程Docker部署RabbitMQ镜像

目录 1、创建挂载目录 2、运行RabbitMQ容器 3、Compose运行RabbitMQ容器 4、开启界面插件 5、查看RabbitMQ运行状态 6、常见问题处理 1、创建挂载目录 # 创建宿主机rabbitMQ挂载目录 sudo mkdir -p /data/docker/rabbitmq/log# 修改log目录权限 sudo chmod 777 /data/do…...

编程日记 2025/5/26 9:41:10

P6打卡—Pytorch实现人脸识别

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊 1.检查GPU import torch import torch.nn as nn import matplotlib.pyplot as plt import torchvisiondevicetorch.device("cuda" if torch.cuda.is_…...

编程日记 2025/5/25 6:31:52

clickhouse-介绍、安装、数据类型、sql

1、介绍 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库（DBMS），使用C语言编写，主要用于在线分析处理查询（OLAP），能够使用SQL查询实时生成分析数据报告。 OLAP（On-Line A…...

编程日记 2025/5/27 5:03:01

基于单片机的智能婴儿床监护系统多功能婴儿床摇篮系统

功能介绍以STM32单片机为控制核心蓝牙传输控制可以进行哭闹检测、尿床检测、音乐播放、语音提醒、哭闹时可以进行摇床有不同的模式自动模式和睡眠模式实物可做，其他功能也可以电路图 PCB 源代码 u8 Temperature_High; //室内温度高阈值 u8 Temperature_…...

编程日记 2025/5/20 4:26:56

微服务？？

1、微服务架构的定义是什么？ 微服务架构是一种将应用程序拆分为多个小型、独立服务的架构风格，每个服务专注于完成特定功能，通过轻量级通信协议（如HTTP/REST、gRPC）进行协作。 2、微服务和单体架构有哪些主要区别&am…...

编程日记 2025/5/25 17:10:59

14-zookeeper环境搭建

0、环境 java：1.8zookeeper：3.5.6 1、下载 zookeeper下载点击这里。 2、安装下载完成后解压，放到你想放的目录里。先看一下zookeeper的目录结构，如下图： 进入conf目录，复制zoo_sample.cfg&#xff0…...

编程日记 2025/5/27 8:56:52

计算机网络八股青春版

什么是HTTP？HTTP和HTTPS的区别 HTTP HTTP是超文本运输协议，是一种无状态（每次请求都是独立的）的应用层协议。用于在客户端和服务器之间传输超文本数据（如HTML文件）。默认端口是80数据以明文形式传输&#…...

编程日记 2025/5/26 20:39:16

快速解决oracle 11g中exp无法导出空表的问题

在一些生产系统中，有些时候我们为了进行oracle数据库部分数据的备份和迁移，会使用exp进行数据的导出。但在实际导出的时候，我们发现导出的时候，发现很多空表未进行导出。今天我们给出一个快速解决该问题的办法。一、问题复现我…...

编程日记 2025/5/27 8:24:10

Unity 6 Preview（预览版）新增功能

原文链接：Unity - 手册：Unity 6 预览版中的新增功能目录原文链接：Unity - 手册：Unity 6 预览版中的新增功能编辑器和工作流程 UI 工具包实体图形 URP HDRP （HDRP） 多人游戏游戏对象的 Netc…...

编程日记 2025/5/26 14:19:50

Halcon单相机+机器人=眼在手上#标定心得

首先，这个标定板肯定是放在我们要作业的工作台上的目的 **1，得到标定物（工作台）与机器人底座之间的pose转换关系。2，得到相机与机器人末端tool的的转换关系。两个不确定的定量 1，标定板与机器人底座b…...

编程日记 2025/5/26 20:16:30

Django 模板分割及多语言支持案例【需求文档】--＞【实现方案】

Django 模板分割及多语言支持案例这个案例旨在提供一个清晰的示范，展示如何将复杂的页面分解为多个可复用的模板组件，使代码更加模块化和易于管理。希望这篇案例文章对你有所帮助。概述在 Django 项目开发中，使用模板分割和多语言支持能…...

编程日记 2025/5/26 8:06:09

1. 基本信息^toc 这里写目录标题 1. 基本信息^toc2. 信息收集2.1. 端口扫描2.2. 目录扫描2.3. knock 3. WordPress利用3.1. wpscan扫描3.2. smtp上传后门 4. 提权4.1. 提权leonard用户4.2. LD劫持提权root 靶机链接 https://hackmyvm.eu/machines/machine.php?vmDiophante 作者…...

编程日记 2025/5/26 22:17:13

基于MATLAB的图像增强

🍑个人主页：Jupiter. 🚀 所属专栏：传知代码欢迎大家点赞收藏评论😊 目录一、背景及意义介绍背景图像采集过程中的局限性意义二、概述三、代码结构及说明（一）整体结构（二&#xf…...

编程日记 2025/5/23 5:09:10

P10425 [蓝桥杯 2024 省 B] R 格式

题目描述： 小蓝最近在研究一种浮点数的表示方法：R 格式。对于一个大于 00 的浮点数 d，可以用 R 格式的整数来表示。给定一个转换参数 n，将浮点数转换为 R 格式整数的做法是： 将浮点数乘以 2^n。四舍五入到最接近的整…...

编程日记 2025/5/5 1:00:38

《软件工程文档攻略：解锁软件开发的“秘籍”》

《软件工程文档攻略：解锁软件开发的“秘籍”》一、引言（一）简述软件工程文档的重要地位二、软件文档的分类及作用（一）按形式分类1. 工作表格2. 文档或文件 （二）按产生和使用范围分类1. 开发文…...

编程日记 2025/5/25 6:46:57

Python从0到100（七十八）：神经网络--从0开始搭建全连接网络和CNN网络

前言： 零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…...

编程日记 2025/5/27 10:36:18

sqlilabs靶场二十一关二十五关攻略

第二十一关第一步可以发现cookie是经过64位加密的我们试试在这里注入选择给他编码发现可以成功注入爆出表名爆出字段爆出数据第二十二关跟二十一关一模一样闭合换成" 第二十三关第二十三关重新回到get请求，会发现输入单引号报错&#xff0c…...

编程日记 2025/5/24 15:08:49

时间管理系统｜Java｜SSM｜JSP｜

【技术栈】 1⃣️：架构: B/S、MVC 2⃣️：系统环境：Windowsh/Mac 3⃣️：开发环境：IDEA、JDK1.8、Maven、Mysql5.7 4⃣️：技术栈：Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…...

编程日记 2025/5/25 13:47:02

长轮询DeferredResult原理

DeferredResult常用来实现客户端长轮询，可以将异步处理的结果在特定时间内（如果设置了超时时间）返回给客户端。 Slf4j RestController RequestMapping("/demo") public class DemoDeferredResult {GetMapping("/deferredResu…...

编程日记 2025/5/27 14:30:15

TouchGFX移植（5）增加触屏驱动

一）增加驱动代码gt9xxx.c和ctiic.c到工程中的BSP目录下: 二）更改触摸文件STM32TouchController.cpp 1）在STM32TouchController.cpp文件中增加： #include “gt9xxx.h” 2）增加gt9xxx_init(); void STM32TouchControlle…...

编程日记 2025/5/27 21:21:11

（九）腾讯cloudstudio(ubuntu)+akiaaa大神 Stable Diffusion整合包 AI绘画教程

一、说明在网上转了一圈，发现确实akiaaa大神的整合包不错，看看这界面就比我前面的流弊多了，后面我们就要把这个界面一步一步干出来二、环境准备这里和前面的一样 （七）腾讯cloudstudioStable-Diffusion-webui AI绘…...

编程日记 2025/5/26 0:15:10

设计模式-访问者设计模式

介绍访问者模式（Visitor），表示一个作用于某对象结构中的各元素的操作，它使你可以在不改变个元素的类的前提下定义作用于这些元素的新操作。问题：在一个机构里面有两种员工，1.Teacher 2.Engineer 员…...

编程日记 2025/5/24 8:21:25

深度学习实战车辆目标跟踪【bytetrack/deepsort】

本文采用YOLOv8作为核心算法框架，结合PyQt5构建用户界面，使用Python3进行开发。YOLOv8以其高效的实时检测能力，在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化，该数据集包含丰富的车辆目标图像样本…...

编程日记 2025/5/25 15:11:54

lammps中EDGE、INF、NULL等常量的含义

在lammps命令中，有几个比较常见的量：EDGE、INF、NULL，不少初学者不知道什么意思，本文详细介绍一下这几个量的含义及用法。 1. EDGE EDGE表示当前box的边界，常用到需要设置坐标的命令中，如region、fix wall/reflect。 EDGE仅表示当前box边界的坐标值，当box尺寸发生变化后…...

编程日记 2025/5/25 14:31:02

Mono里建立调试C#脚本运行环境

前面已经介绍了怎么样来执行一个嵌入式的脚本框架，这个框架是mono编写的一个简单的例子。如果不清楚，可以参考前文： https://blog.csdn.net/caimouse/article/details/144632391?spm=1001.2014.3001.5501 本文主要来介绍一下，我们的C#脚本是长得怎么样的，它大体如下…...

编程日记 2025/5/25 17:27:44

241221面经

1，JVM 的实现中堆、栈和方法区的区别是什么？ 堆（Heap） 功能堆是 JVM 内存中最大的一块，主要用于存储对象实例。无论是通过new关键字创建的对象，还是数组，都在堆上分配内存。它是被所有线程共享…...

编程日记 2025/5/27 6:31:21

【论文复刻】新型基础设施建设是否促进了绿色技术创新的“量质齐升”—来自国家智慧城市试点的证据（C刊《中国人口·资源与环境》

一、数据来源：住建部、国家知识产权局、中国城市统计年鉴，内含原始数据、处理代码和基准回归二、数据范围： DID 为了延长政策效应估计的时间区间，将住建部公布的首批国家智慧城市作为处理组，非试点城市作为对照组。将…...

编程日记 2025/5/26 12:34:53

libreoffice表格python宏教程一

一、安装python宏扩展 LibreOffice自带了一个宏编辑器，但是只能用basic语言，无法用Python。所以，我们必须在单独的编辑器中编写Python代码。需要安装apso扩展，此扩展可以创建删除管理python宏文件，同时还能设置偏好…...

编程日记 2025/5/27 5:23:11

C/C++语言基础--C++STL库之仿函数、函数对象、bind、function简介

本专栏目的更新C/C的基础语法，包括C的一些新特性前言 STL无疑是C史上一个重要的发明，未来我将更新STL有关的知识点，入门绝对够了(看目录就知道了👀)这是第二篇，讲仿函数C语言后面也会继续更新知识点，如…...

编程日记 2025/5/27 7:05:39

前端导出PDF的组件及方法

前端导出PDF的组件及方法在Web应用程序中，导出PDF文件是一项常见的需求。无论是为了打印、分享还是存档，能够将网页内容转换为PDF格式都非常有用。幸运的是，前端开发者有多种方法和组件可以实现这一功能。在本文中，我们将详细介…...

编程日记 2025/5/27 6:59:35

大数据-256 离线数仓 - Atlas 数据仓库元数据管理正式安装启动服务访问 Hive血缘关系导入

点一下关注吧！！！非常感谢！！持续更新！！！ Java篇开始了！ 目前开始更新 MyBatis，一起深入浅出！ 目前已经更新到了： Hadoop&#xff0…...

编程日记 2025/5/27 8:03:48

水文知识图谱构建-学习+代码

文章目录水文模型知识图谱构建与应用（核心）面向水利防汛抢险的知识图谱构建与应用知识图谱在水利工程中的构建与应用代码水文模型知识图谱构建与应用（核心） 水文模型知识图谱构建与应用题目：水文模型知识图谱构建…...

编程日记 2025/5/27 4:20:43

python rabbitmq实现简单/持久/广播/组播/topic/rpc消息异步发送可配置Django

windows首先安装rabbitmq 点击参考安装 1、环境介绍 Python 3.10.16 其他通过pip安装的版本(Django、pika、celery这几个必须要有最好版本一致) amqp 5.3.1 asgiref 3.8.1 async-timeout 5.0.1 billiard 4.2.1 celery 5.4.0 …...

编程日记 2025/5/26 6:19:49

clickhouse优化记录

一、注重使用分区键来加快查询在大数据量的情况下，如果查询语句中，可以使用分区键来进行查询，可以极大缩小数据的查询范围，加快查询速度。二、使用order by的列，适用最左前缀匹配原则比如表的结构是 order by(id…...

编程日记 2025/5/22 15:10:53

z-index

案例一：z-index

案例二：设置z-index

案例三：z-index属性在工作中使用

相关文章：