相对定位、绝对定位、固定定位、绝对定位堆叠顺序

相对定位:相对自己本身进行偏移

CSS语法:

position: relative;/*相对自己进行定位*/
top: 10px;/*距离上边*/
left: 10px;/*距离左边*/

演示图:


 绝对定位:默认以浏览器进行定位。如果想依照父盒子定位,需要在父盒子中设置一个不设置偏移量的相对定位,再在子盒子中设置绝对定位,这样就是依照父盒子进行绝对定位。

CSS语法:

参照浏览器: 

position: absolute;/*绝对定位*/
top: 10px;/*距离上边*/
left: 10px;/*距离左边*/

参照父盒子:

/*假设box是box1的父盒子,此时我想让box的子盒子参考父盒子box进行绝对定位,则分两步:1.在父盒子设置一个不带偏移量的相对定位。2.在子盒子设置绝对定位。*/

            .box{
                width: 800px;
                height: 800px;

                position: relative;/*1.设置一个不带偏移量的相对定位。*/


                
            }


            .box1{
                width: 300px;
                height: 300px;

                position: absolute;/*2.设置绝对定位。这样就是参照box盒子进行定位*/
                top: 10px;/*距离上边*/
                left: 10px;/*距离左边*/

                
            }

演示图:

注意:

一、绝对定位的盒子垂直居中

1.把top设为50%

2.margin-top设为负自己盒子高度的一半

 二、绝对定位的盒子水平居中

1.把left设为50%

2.margin-left设为负自己盒子宽度的一半


固定定位:位置固定在页面的位置上


绝对定位堆叠顺序:把盒子放在最上面到最下面的顺序。相对于其他盒子设置的z-index,设置z-index的值最大,则该盒子在最上面。

CSS语法:

z-index: 9999;/*相对于其他盒子设置的z-index,设置z-index的值最大,则该盒子在最上面*/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

UE5和UE4版本更新重大改变汇总。

转载:UE5和UE4版本更新重大改变汇总。 - 知乎 (zhihu.com) 用户界面变化: 1,原先拖动给放置Actor的place actors,世界大纲,Level等都可以通过右击隐藏到侧边栏; 2,Command命令窗口和ContentBr…

A____Z____RECOVER____DATA勒索恢复---惜分飞

有客户MySQL数据库被黑,业务库中表被删除,并创建A____Z____RECOVER____DATA库,里面有一张readme表,内容为: mysql> select * from readme \G; *************************** 1. row *************************** zh_content: 请尽快与我们取得联系,否则我们将会公…

Cypress环境变量

Cypress环境变量 baseUrl 当你配置了 baseUrl ,测试套件中的 cy.visit() 、 cy.request() 都会自动以 baseUrl 的值作为前缀并且,当你需要访问某些网址或者发起接口请求时,在代码中就可以不用再指定请求的 host 或者 url 了 如何配置 base…

使用Kafka、Flink、Druid构建实时数据系统架构

1. 背景 对于很多数据团队来说,要满足实时需求并不容易。为什么?因为作流程(数据采集、预处理、分析、结果保存)涉及大量等待。等待数据发送到 ETL 工具,等待数据批量处理,等待数据加载到数据仓库中&#…

JSP:Tag文件的使用

需求:多个JSP页面可能需要使用一些相同的信息 例如:导航栏、标题等。 目标:提高这些相同信息的代码的复用性。 方法:将这些相同的元素形成一种特殊的文件,以便所有页面都可以使用,即:Tag文件 1、Tag对…

抽象工厂设计模式是什么?什么是 Abstract Factory 抽象工厂设计模式?Python 抽象工厂设计模式示例代码

什么是 Abstract Factory 抽象工厂设计模式? 抽象工厂设计模式是一种创建型设计模式,旨在提供一个创建一系列相关或相互依赖对象的接口,而无需指定其具体类。它允许客户端使用抽象的接口创建一组相关对象,而无需关注实际的对象实…

广州华锐互动:3D模拟体验火箭发射过程有什么教育意义?

3D虚拟还原火箭发射过程在教育领域有着深远的意义。它能够为学生提供直观、生动的体验,帮助他们更好地理解和掌握相关知识,激发他们对科技的兴趣和探索欲望。 首先,3D虚拟还原火箭发射过程可以帮助学生更好地理解和掌握航天科技知识。在火箭发…

【数据结构】栈和队列的模拟实现

前言:前面我们学习了单链表并且模拟了它的实现,今天我们来进一步学习,来学习栈和队列吧!一起加油各位,后面的路只会越来越难走需要我们一步一个脚印! 💖 博主CSDN主页:卫卫卫的个人主页 &#x…

Leetcode 第 372 场周赛题解

Leetcode 第 372 场周赛题解 Leetcode 第 372 场周赛题解题目1:2937. 使三个字符串相等思路代码复杂度分析 题目2:2938. 区分黑球与白球思路代码复杂度分析 题目3:2939. 最大异或乘积思路代码复杂度分析 题目4:2940. 找到 Alice 和…

演示命令执行漏洞无回现如何渗透

演示命令执行漏洞无回现如何渗透 在DNSlog 获取一个域名 使用dvwa中的命令执行来ping此域名 执行后在DNSlog收到解析,证明命令执行成功

VSCode任务tasks.json中的问题匹配器problemMatcher的问题匹配模式ProblemPattern详解

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、简介 在 VS Code 中,tasks.json 文件中的 problemMatcher 字段用于定义如何解析任务输出中的问题(错误、警告等)。 problemMatcher有三种配置方式,具体可…

欧科云链研究院:从香港SFC最新文件看链上交易合规必备之选

出品|欧科云链研究院 作者|Hedy Bi 近日,香港证监会在其官网发布“致持牌法团、获证监会发牌的虚拟资产服务提供者及有联系实体的通函 - 打击洗钱/恐怖分子资金筹集经更新的《打击洗钱/恐怖分子资金筹集的自我评估查…

图形学 -- Ray Tracing 光线追踪

参考视频:Lecture 13 Ray Tracing 1_哔哩哔哩_bilibili Ray tracing 原因 Rasterization 格栅话不能处理好global effects,如↓ 简介反射:光线在到达人眼前不止弹射一次 基本假设 1)光是沿着直线传播 2)光线交叉…

2023年山东省安全员B证证模拟考试题库及山东省安全员B证理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2023年山东省安全员B证证模拟考试题库及山东省安全员B证理论考试试题是由安全生产模拟考试一点通提供,山东省安全员B证证模拟考试题库是根据山东省安全员B证最新版教材,山东省安全员B证大纲整理…

CMap数据库筛选化学药物

数据库clue.io 文献链接:连接图谱:使用基因表达特征连接小分子、基因和疾病 |科学 (science.org) 基本模式:利用CMap将差异基因列表与数据库参考数据集比对;根据差异表达基因在参考基因表达谱富集情况得到一个相关性分数&#…

YOLOv7训练:_pickle.UnpicklingError: STACK_GLOBAL requires str

在YOLOv7训练过程中,出现以下错误: 原因就是: 这个数据集在其他地方运行过产生了**.cache**文件 解决方案(亲测有效): 删除数据集中的所有 label.cache文件,比如训练集、验证集、测试集都删…

SpingBoot原理

目录 配置优先级Bean管理 (掌握)Bean的获取 ApplicationContext.getBeanBean的作用域 Scope("prototype") Lazy第三方Bean Bean Configuration SpringBoot底层原理 起步依赖与自动配置(无需手撸但面试高频知识点)自动配置引入第三方依赖常见方案方案1:Com…

hook io异常注入

文中code https://gitee.com/bbjg001/darcy_common/tree/master/io_hook 需求引入 最近工作需要,需要验证一下我们的服务在硬盘故障下的鲁棒性。 从同事大佬哪里了解到hook技术,可以通过LD_PRELOAD这个环境变量拦截依赖库的调用链,将对标准…

PowerShell无人参与安装最新版本SQL Server Management Studio (SSMS)

文章目录 下载SQL Server Management Studio (SSMS)Power Shell实现无人安装推荐阅读 下载SQL Server Management Studio (SSMS) SSMS 19.2 是最新的正式发布 (GA) 版本。 如果已经安装了 SSMS 19 预览版,需要在安装 SSMS 19.2 之前将其卸载。 如果安装了 SSMS 19.…

【Java】多线程-单例模式/volatile-指令重排序

单例模式即代码中只有一个实例的模式 适用场景:有些场景下,有的类只能有一个对象,不能有多个 要注意:在单例模式下,要保证不能产生多个实例 1、饿汉模式 class Singleton{private static Singleton instance new …