前端学习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的位置都没有发生改变。 

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

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

相关文章

Linux云计算 |【第五阶段】CLOUD-DAY9

主要内容&#xff1a; Metrics资源利用率监控、存储卷管理&#xff08;临时卷ConfitMap、EmptyDir、持久卷HostPath、NFS(PV/PVC)&#xff09; 一、Metrics介绍 metrics是一个监控系统资源使用的插件&#xff0c;可以监控Node节点上的CPU、内存的使用率&#xff0c;或Pod对资…

BM25:最佳匹配 ,文本相关性评分算法

目录 BM25:最佳匹配 一、BM25算法原理 二、BM25算法的应用场景 三、BM25算法的举例说明 BM25:最佳匹配 BM25(Best Matching 25)是一种在信息检索领域中广泛使用的文本相关性评分算法。它基于概率模型,考虑了词频(Term Frequency,TF)、逆文档频率(Inverse Documen…

论文阅读笔记:Image Processing GNN: Breaking Rigidity in Super-Resolution

论文阅读笔记&#xff1a;Image Processing GNN: Breaking Rigidity in Super-Resolution 1 背景2 创新点3 方法4 模块4.1 以往SR模型的刚性4.2 图构建4.2.1 度灵活性4.2.2 像素节点灵活性4.2.3 空间灵活性 4.3 图聚合4.4 多尺度图聚合模块MGB4.5 图聚合层GAL 5 效果5.1 和SOTA…

【游戏引擎之路】登神长阶(十二)——DirectX11教程:If you‘re going through hell, keep going!

【游戏引擎之路】登神长阶&#xff08;十二&#xff09;——DirectX11教程&#xff1a;If youre going through hell, keep going! 2024年 5月20日-6月4日&#xff1a;攻克2D物理引擎。 2024年 6月4日-6月13日&#xff1a;攻克《3D数学基础》。 2024年 6月13日-6月20日&#x…

编写虚拟的GPIO控制器的驱动程序:和pinctrl的交互使用

往期内容 本专栏往期内容&#xff1a; Pinctrl子系统和其主要结构体引入Pinctrl子系统pinctrl_desc结构体进一步介绍Pinctrl子系统中client端设备树相关数据结构介绍和解析inctrl子系统中Pincontroller构造过程驱动分析&#xff1a;imx_pinctrl_soc_info结构体Pinctrl子系统中c…

toolkit二次开发学习之程序集(ProAsmcomp)和装配体组件路径对象(ProAsmcomppath)

程序集ProAsmcomp可以理解为装配体组件对象。 对象ProAssembly是ProSolid的一个实例&#xff0c;并共享相同的声明。因此&#xff0c;ProAssembly对象可以作为适用于装配体的任何ProSolid和ProMdl函数的输入。特别是&#xff0c;因为你可以使用函数ProSolidFeatVisit()来遍历特…

【启程Golang之旅】深入理解 Protocol Buffers 及其应用

如果你是 Go 语言的开发者&#xff0c;理解如何在 Go 中使用 Protobuf&#xff0c;将帮助你大幅提升数据传输的效率&#xff0c;并实现更高性能的系统设计。 本篇文章将深入探讨 Go 语言中使用 Protobuf 的基础知识、常见应用以及最佳实践&#xff0c;带你一步步了解如何在项目…

linux同步执行命令脚本 (xcall)

linux同步执行命令脚本 (xcall) 1、在/usr/local/bin目录下 创建xcall文件 vim /usr/local/bin/xcall2、输入内容 #!/bin/bash # 获取控制台指令 判断指令是否为空 pcount$# if((pcount0)); thenecho "command can not be null !"exit fifor host in bigdata01 …

Intent介绍#1

Intent 它是Android里非常重要的角色&#xff0c;基本上是核心人物。 能做的 startActivity --> 启动activitybroadcastIntent -> BroadcastContext.startService(Intent) Context.bindService(Intent, BindServiceFlags, Executor, ServiceConnection) -> Service…

VUEX的介绍和使用方式

Vuex 简介 Vuex 是专为 Vue.js 应用设计的状态管理模式&#xff0c;它可以帮助开发者在组件之间更方便地共享数据。Vuex 使用集中化的方式来管理应用的状态&#xff0c;将应用中所有共享的状态存储在一个 store 中。这样可以避免组件之间因为数据共享而产生的复杂交互&#xf…

鸿蒙开发案例:七巧板

【1】引言&#xff08;完整代码在最后面&#xff09; 本文介绍的拖动七巧板游戏是一个简单的益智游戏&#xff0c;用户可以通过拖动和旋转不同形状的七巧板块来完成拼图任务。整个游戏使用鸿蒙Next框架开发&#xff0c;利用其强大的UI构建能力和数据响应机制&#xff0c;实现了…

(61)使用LMS算法估计线性预测器并计算估计误差的MATLAB仿真

文章目录 前言一、仿真说明二、仿真代码三、仿真结果1.LMS自适应滤波器权向量更新曲线2.LMS自适应滤波器算法学习曲线3.期望信号与LMS自适应滤波器输出信号 前言 本文介绍了LMS自适应滤波器对线性预测器系统权系数的估计&#xff0c;进行100次独立实验&#xff0c;计算平均估计…

313页电力集团大数据应用支撑平台技术支撑服务项目技术投标方案

▲关注智慧方案文库&#xff0c;学习9000多份最新解决方案&#xff0c;其中 PPT、WORD超过7000多份 &#xff0c;覆盖智慧城市多数领域的深度知识社区&#xff0c;稳定更新4年&#xff0c;日积月累&#xff0c;更懂行业需求。 313页Word大型电力集团大数据应用支撑平台 技术支…

rabbitMq怎么保证消息不丢失?消费者没有接收到消息怎么处理

在使用RabbitMQ时&#xff0c;保证消息不丢失以及处理消费者未接收到消息的情况可以通过以下几个方法&#xff1a; 1. 确保消息的持久化 队列持久化&#xff1a;在声明队列时将其设置为持久化&#xff08;durabletrue&#xff09;&#xff0c;这样RabbitMQ在重启后也会保留队…

极狐GitLab 签约足下科技,加速国产智驾操作系统的发展与普及

客户背景 足下科技是一家致力于成为智能汽车软件平台、产品与服务领导者的高科技企业&#xff0c;成立于 2022年 3 月&#xff0c;总部位于深圳市。足下科技自主研发的智能驾驶操作系统 Earth 和 Air 工具链&#xff0c;协助OEM和Tier1厂商降低算法和软件开发难度&#xff0c;…

在 MacOS 上跑 kaldi

categories: [asr] tags: C asr kaldi 在MacOS 下跑 kaldi brew install automake llvm cmake sox libtool subversion基本安装 Common build problems pyenv/pyenv Wiki; brew install pyenv pyenv install -v 2.7.18# Set the python version.pyenv global 2.7.18 # Expor…

【C#】Thread.CurrentThread的用法

Thread.CurrentThread 是 System.Threading.Thread 类的一个静态属性&#xff0c;它返回当前正在执行的线程对象。通过 Thread.CurrentThread&#xff0c;可以访问和修改当前线程的各种属性和方法。 下面是一些常见的用法和示例&#xff1a; 1. 获取当前线程的信息 使用 Thr…

使用 Javascript 停用外部集成的 Javascript 文件

优质博文&#xff1a;IT-BLOG-CN 问题 我已将以下内容包含在我的标题代码&#xff08;Google AdSense&#xff09;中。 现在我正在寻找一种通过 Javascript 停用此行的方法&#xff1a; <script type"text/javascript" src"https://domain.tld/javascrip…

Node.js 模块详解

模块的概念 Node.js 运行在 V8 JavaScript 引擎上&#xff0c;通过 require() 函数导入相关模块来处理服务器端的各种进程。一个 Node.js 模块可以是一个函数库、类集合或其他可重用的代码&#xff0c;通常存储在一个或多个 .js 文件中。 例如&#xff0c;启动一个 Node.js 服…

6款IntelliJ IDEA插件,让Spring和Java开发如虎添翼

文章目录 1、SonarLint2、JRebel for IntelliJ3、SwaggerHub插件4、Lombok插件5、RestfulTool插件6、 Json2Pojo插件7、结论 对于任何Spring Boot开发者来说&#xff0c;两个首要的目标是最大限度地提高工作效率和确保高质量代码。IntelliJ IDEA 是目前最广泛使用的集成开发环境…