当前位置: 首页 > 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;我们很多时候是需要知道请求之间的…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...

医疗AI模型可解释性编程研究:基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践,在这一过程中,模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法(如RandomForest、XGBoost、LightGBM)因其卓越的预测性能和相对良好的解释性…...