简述css中z-index的作用?如何用定位使用?


z-index是一个css属性,用于控制元素的堆叠顺序,
   如何使用定位用index
1、position:relative;  z-index;
相对于自己来定位的,可以根据top,bottom,right,left,移动位置

<div style="position: relative; z-index: 2; width: 100px; height: 100px; background-color: red;">内容1
</div>
<div style="position: relative; z-index: 1; width: 100px; height: 100px; background-color: blue;">
内容2
</div>

两个元素重叠内容1比内容2大,所以在内容2上面。

内容一 会在 内容2上面显示,因为 内容一 的 z-index 为 2,而内容2的 z-index 为 1

2、position:absolute;  z-index;
        根据最近的父级来定位的,如果父级没有定位会根据body来定位

<div style="position: relative; width: 200px; height: 200px; background-color: yellow;"><divstyle="position: absolute; top: 50px; left: 50px; z-index: 2; background-color: red; width: 50px; height: 50px;">内容1</div><divstyle="position: absolute; top: 80px; left: 80px; z-index: 1; background-color: blue; width: 50px; height: 50px;">内容2</div></div>


内容1会显示在内容2之上,因为z-index是2,内容2的z-index是1;

        3、position:fixed;  z-index;
                根据浏览器窗口来定位,不会随着页面i滚动

<div style="position: fixed; top: 0; right: 0; z-index: 10; background-color: green; padding: 10px;">内容1</div><div style="position: relative; z-index: 5; background-color: blue; padding: 10px;">内容2</div>


内容1固定到页面右侧,z-index是10,位于内容2之上。




position: sticky(粘性定位):根据浏览器的滚动条来定位的

position: static(静态定位):没有定位,按照html布局的位置来决定的,没有任何效果

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

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

相关文章

Playwright爬虫xpath获取技巧

示例一 <button class"MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton…

Java中处理if-else的几种高级方法

前言 在我看来多写几个if-else没啥大不了的&#xff0c;但是就是看起来没啥逼格&#xff0c;领导嫌弃。我根据开发的经历写几个不同的替代方法 一、枚举法替代 我先前写了一篇文章&#xff0c;可以去看看。 通过枚举替换if-else语句的解决方案_枚举代替if else c语言-CSDN博…

CCNP_SEC_ASA 第六天作业

实验需求&#xff1a; 为保障内部用户能够访问Internet&#xff0c;请把10.1.1.0/24网络动态转换到外部地址池202.100.1.100-202.100.1.200&#xff0c;如果地址池耗尽后&#xff0c;PAT到Outside接口 提示&#xff1a;需要看到如下输出信息 Inside#telnet 202.100.1.1 Trying …

计算机网络 (13)信道复用技术

前言 计算机网络中的信道复用技术是一种提高网络资源利用率的关键技术。它允许在一条物理信道上同时传输多个用户的信号&#xff0c;从而提高了信道的传输效率和带宽利用率。 一、信道复用技术的定义 信道复用&#xff08;Multiplexing&#xff09;就是在一条传输媒体上同时传输…

敏捷开发Scrum的深入理解和实践

敏捷开发&#xff0c;特别是Scrum方法&#xff0c;已经逐渐成为软件开发领域的主流方法。Scrum不仅适用于软件开发&#xff0c;还适用于其他需要快速响应变化和灵活交付的领域。本文将深入探讨Scrum的核心概念、流程、优势、挑战及其在实践中的应用。 一、Scrum的核心概念 Scru…

计算机视觉目标检测-2

文章目录 摘要abstract1.Fast R-CNN1.1 RoI pooling1.2 End-to -End model1.3 多任务损失-Multi-task loss1.4 R-CNN、SPPNet、Fast R-CNN效果比对 2.Faster R-CNN2.1 RPN原理2.2 效果对比2.3 Faster R-CNN总结 3.总结4.参考文献 摘要 本周学习了Fast R-CNN和Faster R-CNN算法…

JavaScript网页设计案例:动态交互式任务列表

在现代网页开发中&#xff0c;JavaScript被广泛应用于实现动态交互效果。看完这一篇你就可以设计一个动态任务列表&#xff0c;全面展示HTML、CSS和JavaScript在前端开发中的实际应用。通过本案例&#xff0c;你将深入了解事件监听、DOM操作以及用户交互设计的实现过程。 案例需…

【MySQL】索引 面试题

文章目录 适合创建索引的情况创建索引的注意事项MySQL中不适合创建索引的情况索引失效的常见情况 索引定义与作用 索引是帮助MySQL高效获取数据的有序数据结构&#xff0c;通过维护特定查找算法的数据结构&#xff08;如B树&#xff09;&#xff0c;以某种方式引用数据&#xf…

使用Excel制作通达信自定义“序列数据“

序列数据的视频教程演示 Excel制作通达信自定义序列数据 1.序列数据的制作方法&#xff1a;删掉没有用的数据&#xff08;行与列&#xff09;和股代码格式处理&#xff0c;是和外部数据的制作方法是相同&#xff0c;自己上面看历史博文。只需要判断一下&#xff0c;股代码跟随的…

【ELK】ES单节点升级为集群模式--太细了!

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言准备工作1. 查看现状【单节点】2. 原节点改集群模式3. 改es配置文件&#xff0c;增加集群相关配置项4. *改docker映射的端口* 启动新节点5. docker-compose起一…

关于区块链的安全和隐私

背景 区块链技术在近年来发展迅速&#xff0c;被认为是安全计算的突破&#xff0c;但其安全和隐私问题在不同应用中的部署仍处于争论焦点。 目的 对区块链的安全和隐私进行全面综述&#xff0c;帮助读者深入了解区块链的相关概念、属性、技术和系统。 结构 首先介绍区块链…

webauthn介绍及应用

1、webauthn介绍 官网&#xff1a;https://webauthn.io/ 1.1、什么是webauthn&#xff1f; webauthn即Web Authentication&#xff0c;是一个符合W3C标准的Web认证规范。它通过公私钥加密技术&#xff0c;实现无密码认证&#xff0c;用户仅需通过pin码、指纹、面部识别、usb …

ElasticSearch如何做性能优化?

大家好&#xff0c;我是锋哥。今天分享关于【ElasticSearch如何做性能优化?】面试题。希望对大家有帮助&#xff1b; ElasticSearch如何做性能优化? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Elasticsearch 是一个开源的分布式搜索引擎&#xff0c;广泛用于…

Python 高级游戏开发:构建一个基于 Pygame 的多人在线战斗游戏

在本篇文章中,我们将介绍如何使用 Python 和 Pygame 库开发一个具有多人在线功能的高级游戏。我们将涵盖如何搭建游戏服务器,如何实现客户端-服务器模型,以及如何处理网络通信和游戏逻辑。这不仅能帮助你提升游戏开发技能,还能加深对 Python 网络编程的理解。 一、准备工作…

瑞芯微全新芯片平台RK3506优势详解,高集成低功耗,为工业而生 触觉智能测评

RK3506是瑞芯微Rockchip在2024年第四季度全新推出的Arm嵌入式芯片平台&#xff0c;三核Cortex-A7单核Cortex-M0多核异构设计&#xff0c;CPU频率达1.5Ghz, M0 MCU为200Mhz。 而RK3506芯片平台下的工业级芯片型号RK3506J&#xff0c;具备-40-85℃的工业宽温性能、发热量小&#…

CentOS7 初始化模板

一、下载Centos7的qcow2镜像 CentOS Cloud Images qemu-img.exe convert -f qcow2 -O vmdk CentOS-7-x86_64-GenericCloud-2211.qcow2 centos7.vmdk 二、更改root密码 注意由于有cloud init的原因&#xff0c;按网上进入救援模式的办法无法修改密码&#xff0c;会卡住不动。…

Docker 安装全攻略:从入门到上手

Docker 安装全攻略&#xff1a;从入门到上手 在当今的软件开发与部署领域&#xff0c;Docker 已经成为了一项不可或缺的关键技术。它能够将应用程序及其依赖项打包成轻量级、可移植的容器&#xff0c;极大地简化了开发、测试和部署的流程。本文将详细讲解在不同操作系统下 Doc…

代码随想录算法训练营第六十天 | 图 | A星算法

Day 60 总结 自己实现中遇到哪些困难今日收获&#xff0c;记录一下自己的学习时间 13:00 - 14:00 BFS 题目&#xff1a;127. 骑士的攻击 给定两个坐标&#xff0c;搜索最短路径 使用 BFS&#xff0c;广度搜索&#xff0c;按层搜索找到最短路径 public class Main {public…

【 Sonarqube】可视化Java项目单元测试覆盖率统计框架搭建

一、项目背景&#xff1a; 一个小公司的朋友反应他们那边Java项目单元测试有&#xff0c;但还没有可视化统计覆盖率数据&#xff0c;没法统计就不能直观的看到单测的覆盖率&#xff0c;Java的覆盖率统计框架还是比较成熟&#xff0c;部署起来也不是很难&#xff0c;下面我们逐…

PTA数据结构编程题7-1最大子列和问题

我参考的B站up的思路 题目 题目链接 给定K个整数组成的序列{ N 1 ​ , N 2 ​ , …, N K ​ }&#xff0c;“连续子列”被定义为{ N i ​ , N i1 ​ , …, N j ​ }&#xff0c;其中 1≤i≤j≤K。“最大子列和”则被定义为所有连续子列元素的和中最大者。例如给定序列{ -2, 1…