CSS之显示覆盖内容(z-index)

前言:

我们有的时候,希望下方的内容能够显示到上方,达到类似于多个图层的效果,此时我们可以利用z-index这个属性。

介绍;

z-index属性值是用来设置元素的堆叠顺序(元素层级)。

覆盖原则:

 <1>特殊情况

默认(或者position:static)情况下,z-index会失效,因此我们不会在此情况中使用z-index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{z-index: 1;width: 200px;height: 200px;position: static;background-color: aqua;}.b{z-index: 100;background-color: rgb(222, 135, 135);}</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

<2>同级元素之间

z-index级别大的在上,级别小的在下,z-index的默认值是0.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{z-index: 1;width: 300px;height: 300px;   position:absolute;background-color:blue;}.b{width: 200px;height: 200px;z-index: 100;position:absolute;background-color: rgb(222, 135, 135);}</style>
</head>
<body><div class="a"></div><div class="b"></div>
</body>
</html>

<2>非同级元素

对于非同级的元素,元素根据其父级元素的z-index来判别,与自身的z-index无关

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a {z-index: 12;width: 300px;height: 300px;position: absolute;background-color: rgb(96, 96, 140);}.b {width: 200px;height: 200px;z-index: 1;position: absolute;background-color: rgb(222, 135, 135);}.c {left: 100px;width: 200px;height: 200px;z-index: 100;position: absolute;background-color: aqua;}.d {width: 200px;height: 200px;z-index: 1;position: absolute;background-color: rgb(169, 36, 36);}</style>
</head><body><div class="a">box1<div class="b"></div></div><div class="c">box2<div class="d"></div></div>
</body></html>

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

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

相关文章

debian配置distcc分布式编译

前言 distcc 是一个用于在网络上的多台机器上分发 C、C、Objective C 或 Objective C 代码构建的程序。 distcc 应始终生成与本地构建相同的结果&#xff0c;易于安装和使用&#xff0c;并且通常比本地编译快得多。 distcc 不要求所有机器共享文件系统、同步时钟或安装相同的…

React【Day4】

路由快速上手 1. 什么是前端路由 一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候&#xff0c;path 对应的组件会在页面中进行渲染 2. 创建路由开发环境 # 使用CRA创建项目 npm create-react-app react-router-pro# 安装最新的ReactRouter包 …

Windows 系统上实现 sshpass 方案

sshpass 是 Linux 上的一个免输入密码通过 ssh 登录的方案&#xff0c;可以通过在命令行中指定密码&#xff0c;无需交互的方式完成一些自动化的动作。但是在 Windows 系统中并没有直接提供相关的支持。本篇文章针对这个思路探讨一下其他实现方式。 Win 安装 sshpass 在 gith…

SpringCloud系列(17)--将服务消费者Consumer注册进Zookeeper

前言&#xff1a;在上一章节中我们把服务提供者Provider注册进了Zookeeper&#xff0c;而本章节则是关于如何将服务消费者Consumer注册进Zookeeper 1、再次创建一个服务提供者模块&#xff0c;命名为consumerzk-order80 (1)在父工程下新建模块 (2)选择模块的项目类型为Maven并…

初步认识Java

Java之父 Java 语言源于 1991 年 4 月&#xff0c;Sun 公司 James Gosling博士 领导的绿色计划(Green Project) 开始启动&#xff0c;此计划最初的目标是开发一种能够在各种消费性电子产品(如机顶盒、冰箱、收音机等)上运行的程序架构。这个就是Java的前身&#xff1a; Oak (得…

移动端日志采集与分析最佳实践

前言 做为一名移动端开发者&#xff0c;深刻体会日志采集对工程师来说具有重要意义&#xff0c;遇到问题除了 debug 调试就是看日志了&#xff0c;通过看日志可以帮助我们了解应用程序运行状况、优化用户体验、保障数据安全依据&#xff0c;本文将介绍日志采集的重要性、移动端…

【软件安装】(十六)双系统Ubuntu22.04引导启动菜单的默认项

一个愿意伫立在巨人肩膀上的农民...... 好学的人总是喜欢在电脑上安装双系统&#xff0c;可是安装好系统之后&#xff0c;就会出现默认启动优先级的苦恼&#xff0c;如果在Bios中设置Windows引导启动为优先启动&#xff0c;那么每次想要进如Ubuntu系统就都需要重新设置Bios。如…

一起陪伴走过20多年,XILINX五大系列CPLD/FPGA将于6月截止接单

一起陪伴走过20多年&#xff0c;XILINX五大系列CPLD/FPGA将于6月截止接单 Product Discontinuation Notice AMD/XILINX于2024年春节后&#xff0c;发布了最新的产品停产通知&#xff0c;产品系列包括&#xff1a;XC9500XL, CoolRunner XPLA 3, CoolRunner II, Spartan II, a…

【数据库】Redis

文章目录 [toc]Redis终端操作进入Redis终端Redis服务测试切换仓库 String命令存储字符串普通存储设置存储过期时间批量存储 查询字符串查询单条批量查询 Key命令查询key查询所有根据key首字母查询判断key是否存在查询指定的key对应的value的类型 删除键值对 Hash命令存储hash查…

ssm智能停车场管理系统

视频演示效果: SSMvue智能停车场 摘 要 本论文主要论述了如何使用JAVA语言开发一个智能停车场管理系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述智能停车…

C++11 数据结构5 队列的概念,队列的顺序存储,实现,测试

一&#xff0c;队列的概念 队列是一种特殊的受限制的线性表。 队列&#xff08;queue&#xff09;是只允许在一端进行插入操作&#xff0c;而在另一端进行删除操作的线性表。 队列是一种先进先出的t&#xff08;First In First Out&#xff09;的线性表&#xff0c;简称FIF…

数组和指针经典笔试题讲解

目录 创作不易&#xff0c;如对您有帮助&#xff0c;还望一键三连&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 1.sizeof和strlen的对比 1.1sizeof 1.2strlen 1.3sizeof和strlen对比 2.数组笔试题讲解 数组名的理解 2.1一维数组 2.2字符数组 题目一&#x…

【skill】usbwebserver的几个问题

试了几个云服务器&#xff08;华为云、移动10086云&#xff09;&#xff0c;使用usbwebserver均会出现问题。 以前都是找缺少的对应的dll文件&#xff0c;不仅搜索半天、解压、移动复制、同时还要考虑文件的位数 有人说C:\Windows\System32存放的是64位的东西有人说C:\Windows…

Axure设计美观友好的后台框架页

使用Axure设计后台框架页 优点介绍&#xff1a; **1、使用中继器灵活配置菜单项&#xff1b; 2、二级菜单面板跟随一级菜单位置显示&#xff1b; 3、菜单链接打开后&#xff0c;联动添加tab标签&#xff1b; 4、标签页与iframe内容联动&#xff0c;可关闭&#xff1b; 5、左侧…

车道分割YOLOV8-SEG

车道分割YOLOV8-SEG&#xff0c;训练得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV的DNN调用&#xff0c;支持C,PYTHON,ANDROID开发 车道分割YOLOV8-SEG

Xline中区间树实现小结

Table of Contents 实现区间树的起因区间树实现简介 插入/删除查询重叠操作使用Safe Rust实现区间树 问题Rc<RefCell<T>> i. 线程安全问题其他智能指针 i. Arc<Mutex<T>>? ii. QCell数组模拟指针总结 01、实现区间树的起因 在Xline最近的一次重构中…

苍穹外卖学习笔记(8.用户端历史订单模块,商家端订单管理模块)

目录 一、商家端订单管理模块1、查看历史订单2、查询订单详情3、取消订单4、再来一单5、代码开发6、测试 二、用户端历史订单模块1、订单搜索2、各个状态的订单数量统计3、查询订单详情4、接单5、拒单6、取消订单7、派送订单8、完成订单9、代码开发10、测试 三、校验收货地址是…

逆向案例二十九——复杂扣代码,七某数据(一)

网址&#xff1a;aHR0cHM6Ly93d3cucWltYWkuY24vcmFuaw 抓包分析载荷中有加密参数analysis&#xff1a; 获取数据代码&#xff0c;经过分析&#xff0c;发现analysis确实是校验参数cai&#xff1a; import requestscookies {qm_check: A1sdRUIQChtxen8pI0dAMRcOUFseEHBeQF0JT…

31.Gateway网关-跨域问题

跨域 1.域名不同&#xff1a;www.baidu.com和www.taobao.com,www.taobao.org 2.域名相同&#xff0c;端口不同。localhost:8080和localhost:8081 跨域问题 浏览器禁止请求的发起者与服务端发生跨域ajax请求&#xff0c;请求被浏览器拦截的问题。 解决方案 CORS 浏览器询…

安全开发实战(2)---域名反查IP

目录 安全开发专栏 前言 域名与ip的关系 域名反查ip的作用 1.2.1 One 1.2.2 Two 1.2.3 批量监测 ​总结 安全开发专栏 安全开发实战http://t.csdnimg.cn/25N7H 这步是比较关键的一步,一般进行cdn监测后,获取到真实ip地址后,或是域名时,然后进行域名反查IP地址,进行进…