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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...