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

前端学习Day13 CSS盒子的定位(固定定位篇“附练习”)

一、固定定位

固定定位 (position:fixed)其实是绝对定位的子类别,一个设置了 position:fixed 的元素是相对于视窗固定的,就算页面文档发生了滚动,它也会一直待在相同的地方。

⚠️:固定定位会脱离文档流。

固定定位:position:fixed

比较好理解所以我们直接通过练习来解释。

示例:

<head><style>div{width: 200px;height: 200px;background-color: gray;margin-bottom: 5px;}#div3{background-color: rgb(231, 185, 117);margin-bottom: 5px;position: fixed;left: 220px;top: 200px;}#div5{background-color: rgb(129, 235, 129);margin-bottom: 5px;position: fixed;left: 250px;top: 250px;}/* id选择器优先级高 */</style>
</head>
<body><div>盒子1</div><div>盒子2</div><div id="div3">盒子3(固定定位)</div><div>盒子4</div><div id="div5">盒子5(固定定位)</div><div>盒子6</div><div>盒子7</div>
</body>

运行结果:

①滚动前

滚动后 

可以发现滚动前和滚动后,盒子3、盒子5的位置都没有发生改变。 

相关文章:

前端学习Day13 CSS盒子的定位(固定定位篇“附练习”)

一、固定定位 固定定位 &#xff08;position:fixed&#xff09;其实是绝对定位的子类别&#xff0c;一个设置了 position:fixed 的元素是相对于视窗固定的&#xff0c;就算页面文档发生了滚动&#xff0c;它也会一直待在相同的地方。 ⚠️&#xff1a;固定定位会脱离文档流。…...

Tomcat 启动卡住,日志显示 At least one JAR was scanned for TLDs yet contained no TLDs.

现象 Tomcat 启动后&#xff0c;控制台输出卡在了&#xff1a; At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded JA…...

计算机网络:网络层 —— 移动 IP 技术

文章目录 IPv6IPv6 的诞生背景主要优势IPv6引进的主要变化 IPv6数据报的基本首部IPv6数据报首部与IPv4数据报首部的对比 IPv6数据报的拓展首部IPv6地址IPv6地址空间大小IPv6地址的表示方法 IPv6地址的分类从IPv4向IPv6过渡使用双协议栈使用隧道技术 网际控制报文协议 ICMPv6ICM…...

useCrudSchemas

摘要&#xff1a; useCrudSchemas 不是一个标准的JavaScript或数据库操作库函数&#xff0c;也不是一个广泛认知的术语。它可能是某个特定项目或应用程序中定义的一个自定义函数或方法&#xff0c;用于简化CRUD&#xff08;创建、读取、更新、删除&#xff09;操作。 在Web开发…...

SpringBoot3集成Junit5

目录 1. 确保项目中包含相关依赖2. 配置JUnit 53. 编写测试类4、Junit5 新增特性4.1 注解4.2 断言4.3 嵌套测试4.4 总结 在Spring Boot 3中集成JUnit 5的步骤相对简单。以下是你可以按照的步骤&#xff1a; 1. 确保项目中包含相关依赖 首先&#xff0c;确保你的pom.xml文件中…...

【EMNLP2024】阿里云人工智能平台 PAI 多篇论文入选 EMNLP2024

近期&#xff0c;阿里云人工智能平台 PAI 的多篇论文在 EMNLP2024 上入选。论文成果是阿里云与华南理工大学金连文教授团队、复旦大学王鹏教授团队共同研发。EMNLP 是人工智能自然语言处理领域的顶级国际会议&#xff0c;聚焦于自然语言处理技术在各个应用场景的学术研究&#…...

Spark的Shuffle过程

一、Shuffle 的作用是什么&#xff1f; Shuffle 操作可以理解为将集群中各个节点上的数据进行重新整理和分类的过程。这一概念源自 Hadoop 的 MapReduce 模型&#xff0c;Shuffle 是连接 Map 阶段和 Reduce 阶段的关键环节。在分布式计算中&#xff0c;每个计算节点通常只处理任…...

Java+Swing可视化图像处理软件

JavaSwing可视化图像处理软件 一、系统介绍二、功能展示1.图片裁剪2.图片缩放3.图片旋转4.图像灰度处理5.图像变形6.图像扭曲7.图像移动 三、系统实现1.ImageProcessing.java 四、其它1.其他系统实现2.获取源码 一、系统介绍 该系统实现了图片裁剪、缩放、旋转、图像灰度处理、…...

RDD转换算子:【mapValues、mapPartitions】

文章目录 1、mapValues算子功能语法举例 2、mapPartitions算子功能语法举例 1、mapValues算子 功能 针对二元组KV类型的RDD&#xff0c;对RDD中每个元素的Value进行map处理&#xff0c;结果放入一个新的RDD中 语法 def mapValues(self: RDD[Tuple[K,V]], f: (V) -> U) -…...

数组和指针的复杂关系

C语言中指针和数组的关系似乎很“纠结”&#xff0c;让人爱恨交织。本文试图帮助读者理清它们之间的复杂关系&#xff01; 数组名的理解 数组元素在内存中是连续存放的&#xff0c;在C语言中&#xff0c;数组名有特殊的含义&#xff0c;它表示数组首元素的地址。因此&#xf…...

Linux系统I/O调优实例

文章目录 一 、资源限制二、测试硬盘速度&#xff1a; 一 、资源限制 限制用户资源配置文件&#xff1a;/etc/security/limits.conf [rootxuegod63 ~]# vim /etc/security/limits.conf 每行的格式&#xff1a; 用户名/用户组名 类型(软限制/硬限制) 选项 值 通常我们在服务器…...

记录Ubuntu OS的异常

PS: 参加过408改卷的ZJU ghsongzju.edu.cn 开启嘲讽: 你们知道408有多简单吗&#xff0c;操作系统真实水平自己知道就行&#xff5e;&#xff5e; dmesg dmesg 是一个用于显示内核环形缓冲区消息的命令&#xff0c;主要用于查看系统启动时的消息、驱动程序加载信息、硬件错误…...

Vue 3 单元测试与E2E测试

在Vue 3应用的开发过程中&#xff0c;测试是一个至关重要的环节。它不仅能够确保代码的正确性&#xff0c;还能在后续的代码重构和升级过程中提供安全保障。本文将深入探讨Vue 3的单元测试&#xff08;Unit Testing&#xff09;和端到端测试&#xff08;End-to-End Testing, E2…...

猫用空气净化器哪个牌子好?求除毛好、噪音小的宠物空气净化器!

换毛季家里孩子不省心&#xff0c;疯狂掉落的猫毛和空气中乱飞的浮毛可把我折磨死了。每天下班都要抽出时间来清理&#xff0c;不然这个家就不能要了。猫毛靠我自己可以打扫&#xff0c;浮毛还得借助宠物空气净化器这种专业工具。所以我最近着手做功课&#xff0c;打算入手一台…...

第十九课 Vue组件中的方法

Vue组件中的方法 组件中的方法拓展与实例对象中的方法拓展类似 <div id"app"><test></test> </div> <script>Vue.component(test, {template: <input type"button" value"这是个按钮组件" click"fun()…...

【JavaScript】V8,Nodejs 与浏览器

V8 V8 是一个 JavaScript engine&#xff0c;负责编译并执行 JavaScript 源代码&#xff0c;处理对象的内存分配&#xff0c;并对不再需要的对象进行垃圾收集。 V8 包含两个主要组件&#xff1a; Memory Heap&#xff1a;负责存储分配。 Call Stack&#xff1a;代码执行时&am…...

内存马浅析

之前在jianshu上写了很多博客&#xff0c;但是安全相关的最近很多都被锁了。所以准备陆陆续续转到csdn来。内存马前几年一直是个很热门的漏洞攻击手段&#xff0c;因为相对于落地的木马&#xff0c;无文件攻击的内存马隐蔽性、持久性更强&#xff0c;适用的漏洞场景也更多。 J…...

聊一聊Elasticsearch的基本原理与形成机制

1、搜索引擎的基本原理 通常搜索引擎包括&#xff1a;数据采集、文本分析、索引存储、搜索等模块&#xff0c;它们之间的协作流程如下图&#xff1a; 数据采集模块负责采集需要搜索的数据源。 文本分析模块是将结构化数据中的长文本切分成有实际意义的词&#xff0c;这样用户…...

应急救援无人车:用科技守护安全!

一、核心功能 快速进入危险区域&#xff1a; 救援无人车能够迅速进入地震、火灾、洪水等自然灾害或重大事故的现场&#xff0c;这些区域往往对人类救援人员构成极大威胁。 通过自主导航和环境感知技术&#xff0c;无人车能够避开危险区域&#xff0c;确保自身安全的同时&…...

详解Java之Spring MVC篇二

目录 获取Cookie/Session 理解Cookie 理解Session Cookie和Session的区别 获取Cookie 获取Session 获取Header 获取User-Agent 获取Cookie/Session 理解Cookie HTTP协议自身是“无状态”协议&#xff0c;但是在实际开发中&#xff0c;我们很多时候是需要知道请求之间的…...

毕业论文格式反复返工?paperxie 智能排版教你一键通过导师审核

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AI PPThttps://www.paperxie.cn/format/typesettinghttps://www.paperxie.cn/format/typesetting 作为毕业季最耗时耗力的 “机械劳动”&#xff0c;论文格式调整往往比正文写作更磨人。字号、行距、页眉页…...

Airflow Maintenance Dags:7个关键维护工作流彻底解决Airflow运维难题

Airflow Maintenance Dags&#xff1a;7个关键维护工作流彻底解决Airflow运维难题 【免费下载链接】airflow-maintenance-dags A series of DAGs/Workflows to help maintain the operation of Airflow 项目地址: https://gitcode.com/gh_mirrors/ai/airflow-maintenance-dag…...

全面实战指南:如何高效部署ChatTTS-ui语音合成系统

全面实战指南&#xff1a;如何高效部署ChatTTS-ui语音合成系统 【免费下载链接】ChatTTS-ui 一个简单的本地网页界面&#xff0c;使用ChatTTS将文字合成为语音&#xff0c;同时支持对外提供API接口。A simple native web interface that uses ChatTTS to synthesize text into …...

QMCDecode终极指南:5分钟快速掌握QQ音乐加密格式转换技巧

QMCDecode终极指南&#xff1a;5分钟快速掌握QQ音乐加密格式转换技巧 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默…...

【数字图传第四步】Android App查看图传视频

接上回 前面三个章节完成之后&#xff0c;我们就有了一个图传的发送端&#xff08;可以是esp32cam&#xff0c;也可以是esp32s3cam&#xff09;&#xff0c;一个是图传接收端&#xff08;usb 摄像头 串口&#xff09;。图传的发送端&#xff0c;淘宝上到处都是。接收端必须是…...

第一学期结果

关注 1.从安涛老师前三期视频中了解了方向2.从b站了解了555的内部结构3.仿真。4.低通滤波器的基本原理&#xff1a;一、核心定义只允许低频信号顺利通过&#xff0c;阻挡、衰减高频信号的电路。 你电路里作用&#xff1a;滤掉方波里的高频谐波&#xff0c;留下低频基波&#xf…...

AI Coding 时代的工程策略革命:为什么 Monorepo 成了 AI 的“最佳拍档“?

AI Coding 时代的工程策略革命&#xff1a;为什么 Monorepo 成了 AI 的"最佳拍档"&#xff1f; 导读&#xff1a;当 AI 开始替你写代码&#xff0c;你的工程架构是否还在"拖后腿"&#xff1f;本文从 AI 的视角重新审视工程策略&#xff0c;深度解析为什么 …...

ESXi安装卡在网卡识别?除了打驱动,你还可以试试这个国产替代方案FreeVM

ESXi网卡兼容性困境&#xff1a;为何国产FreeVM可能更适合你的虚拟化需求 当你第5次重启ESXi安装程序&#xff0c;屏幕上依然显示"No Network Adapters"的红色报错时&#xff0c;那种挫败感任何IT从业者都深有体会。硬件兼容性问题——这个困扰虚拟化领域多年的顽疾&…...

【K8s】解惑:K8s 与 Docker 的关系

目录 引言&#xff1a;一个绕不开的问题 一句话说清K8s与Docker的关系 澄清三个误解 从命令的角度&#xff0c;直观对比 引言&#xff1a;一个绕不开的问题 在学习云原生技术的路上&#xff0c;几乎每个人都会遇到这样一个困惑&#xff1a; “有了 Kubernetes&#xff08…...

巴别鸟vs坚果云:企业云盘同步机制踩坑与实战配置

干企业网盘这行&#xff0c;最怕听到用户说"同步慢"。我们2019年上线第一版云盘时&#xff0c;同步1GB的CAD图纸包要40分钟&#xff0c;用户骂完就跑。踩了三年坑才知道&#xff0c;"能同步"和"同步好用"根本是两回事。 本文从踩坑实录加配置实战…...