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

css position属性与js滚动

news 2025/12/16 1:50:46

 “视口”就是浏览器窗口中实际显示文档内容的区域，不包含浏览器的“外框”，如菜单、工具条和标签。文档则是指整个网页。

1 css 的position

static

正常定位，是元素position属性的默认值，元素遵循常规流。

relative

相对定位，会相对于自身在常规流中的位置进行定位。其在常规流中的位置会被保留。

absolute

绝对定位，会脱离文档流，相对于离自身最近的祖先（position为relative）进行偏移定位。

fixed

固定定位，会脱离文档流，相对窗口进行偏移定位。

sticky

粘性定位，类似static和fixed的结合。

表 css position属性的5个值

1.1 relative 相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="container"><div class="con1"><div class="block"></div><div class="block">position:static</div><div class="block"></div></div><div class="isolate"></div><div class="con2"><div class="block block1"></div><div class="block block2">position:relative</div><div class="block"></div></div>
</div>
</body>
</html><style lang="less">.block {width: 150px;height: 100px;background-color: #f3bbbb;border: solid 1px blue;text-align: center;line-height: 100px;color: red;}.container {display: flex;.isolate{width: 30px;}.con2 {.block1 {z-index: 99;}.block2 {z-index: 1;background-color: blue;position: relative;top: -100px;}}}
</style>

图 position=relative 示意图

注意，当position为static(常规)时，z-index及left(等位置元素)均为无效。

1.2 absolute 绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="container"><div class="con1"><div class="block"></div><div class="block">position:static</div><div class="block"></div></div><div class="isolate"></div><div class="con2"><div class="block block1"></div><div class="block block2"><div>position:absolute (parent is "body")</div></div><div class="block"></div></div><div class="isolate"></div><div class="con2"><div class="block block1"></div><div class="parent"><div class="block block2">position:absolute (parent is "div")</div></div><div class="block"></div></div>
</div>
</body>
</html><style lang="less">.block {width: 150px;height: 100px;background-color: #f3bbbb;border: solid 1px blue;text-align: center;line-height: 100px;color: red;}.container {display: flex;.isolate{width: 30px;}.con2 {.block1 {z-index: 99;}.block2 {line-height: 50px;z-index: 1;background-color: blue;position: absolute;top: 50px;}.parent {position: relative;}}}
</style>

图 position=absolute 示意图

注意: absolute 是相对于position=relative的最近父元素定位，当没有找到相关父元素时，会相对于<body>标签定位。

1.3 fixed 固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="block"><div class="con"></div>
</div>
</body>
</html><style>
.block {width: 10000px;height: 600px;background: #f3c4c4;
}
.con {width: 100px;height: 100px;position: fixed;background: blue;left: 100px;top: 100px;
}
</style>

 

图 position=fixed示意图

注意：fixed 是相对于窗口，会脱离文档流。

1.4 sticky 粘性定位

当position=sticky时，如果top、right、bottom、left四个属性都不设置具体值，sticky不会生效，其表现效果与static一致。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="big-container"><div class="container container1"><div class="con con1"></div><div class="sep"></div><div class="con con2"></div><div class="sep"></div><div class="con con3"></div></div><div class="container container2"><div class="con con1"></div><div class="sep"></div><div class="con con2"></div><div class="sep"></div><div class="con con3"></div></div>
</div>
</body>
</html><style>.big-container {display: flex;.container {width: 100px;height: 250px;margin-left: 30px;border: solid 1px #8a8a8a;overflow: auto;.sep {width: 100px;height: 30px;background: grey;}&.container2 {.con2 {top: 30px;position: sticky;}}.con {width: 100px;height: 100px;background: #f3bbbb;}.con2 {background: green;}}}
</style>

图 position=sticky 示意图

当top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态静态定位状态及固定定位（fixed）状态。例如，当top=30px时，元素离窗口距离大等于30px时，元素为静态定位状态，否则为固定定位状态。

图 position=sticky 元素处理固定状态示意图

注意：当元素处于固定状态时，其在文档流中的位置会被保留。

2 滚动

1）Window对象的scrollTo方法，接收一个点的x和y坐标，这个方法会滚动窗口，从而让这个点位于视口点左上角。如果这个点太接近文档顶部或右边，浏览器会尽可能让视口左上角接近这个点，但不可能真的移动到该点。

2）Window对象的scrollBy方法，参数数个相对值，会加在当前滚动位置之上。

scrollBy(0,50); // 向下滚动50像素。

3）HTML元素上的scrollIntoView方法，保证调用它的那个元素在视口中可见。默认情况下，滚动后的结果会尽量让元素的上边对齐或接近视口上沿。如果给这个方法传人唯一参数false，则滚动结果会尽量让元素的底边对齐视口下沿。

2.1 平衡滚动

如果想让上述滚动方法平滑移动，则需传人一个对象，而不是两个数值。这个对象的behavior属性有两个属性值：auto(instant)，默认值，立即滚动到指定位置；smooth，滚动时平滑过渡。

图 平滑滚动示意图

相关文章：

css position属性与js滚动

“视口”就是浏览器窗口中实际显示文档内容的区域&#xff0c;不包含浏览器的“外框”&#xff0c;如菜单、工具条和标签。文档则是指整个网页。 1 css 的position static 正常定位&#xff0c;是元素position属性的默认值&#xff0c;元素遵循常规流。 relative 相对定位&…...

编程日记 2023/10/31 18:12:56

python内置模块hashlib对于字符串的加密解密加盐

hash是一类算法而hashlib模块是Python的一个内置模块&#xff0c;主要功能是使用对应的hash算法&#xff0c;加密二进制内容解密二进制内容 常见的hash算法有md5、sha1&#xff0c;sha256, sha512等 特点 1.内容敏感,那怕一个很小的字符发生改变都很明显 2.不可逆,不能逆向求值…...

编程日记 2023/10/31 18:10:52

获取客户端请求IP及IP所属城市

添加pom依赖 <dependency> <groupId>org.lionsoul</groupId> <artifactId>ip2region</artifactId> <version>2.6.5</version> </dependency> public class IpUtil { private…...

编程日记 2023/10/31 18:09:51

【洛谷 P1106】删数问题 题解（贪心+字符串）

删数问题 题目描述 键盘输入一个高精度的正整数 N N N&#xff08;不超过 250 250 250 位&#xff09;&#xff0c;去掉其中任意 k k k 个数字后剩下的数字按原左右次序将组成一个新的非负整数。编程对给定的 N N N 和 k k k&#xff0c;寻找一种方案使得剩下的数字组成…...

编程日记 2023/10/31 18:08:50

【Python · PyTorch】线性代数 微积分

本文采用Python及PyTorch版本如下&#xff1a; Python&#xff1a;3.9.0 PyTorch&#xff1a;2.0.1cpu 本文为博主自用知识点提纲&#xff0c;无过于具体介绍&#xff0c;详细内容请参考其他文章。 线性代数 & 微积分 1. 线性代数1.1 基础1.1.1 标量1.1.2 向量长度&…...

编程日记 2023/10/31 18:07:49

建模和图表工具:Software Ideas Modeler Crack

用于图表、软件设计和分析的 CASE 工具 Software Ideas Modeler 是一款智能CASE 工具和 图表软件&#xff0c;支持 UML、SysML、ERD、BPMN、ArchiMate、流程图、用户故事、线框图。 提升用户体验和人工智能集成 - Software Ideas Modeler 14.05 最近发布的 14.05 版本带来了一…...

编程日记 2023/10/31 18:06:48

Android开发，车载通讯应用——binder通讯原理解析

Binder简单理解 简单来说&#xff0c;Binder 就是用来Client 端和 Server 端通信的。并且 Client 端和 Server 端 可以在一个进程也可以不在同一个进程&#xff0c;Client 可以向 Server 端发起远程调用&#xff0c;也可以向Server传输数据&#xff08;当作函数参数来传&#…...

编程日记 2023/10/31 18:04:47

[算法]求n!在m进制下末尾有多少个0

参考链接&#xff1a;求n&#xff01;在m进制下末尾0的个数_.!零n,,m-CSDN博客 我们这里和参考链接不同 使用结构体去存储每个因数的信息 然后使用变量index作为索引&#xff0c;其最终值为因数的个数 具体原理&#xff1a; 例子1&#xff1a;求9&#xff01;在10进制下的…...

编程日记 2023/10/31 18:03:46

mysql之用户管理、权限管理、密码管理

用户管理 创建用户create user 杨20.0.0.13 identified by 123; 用户重命名rename user 杨20.0.0.13 to yang20.0.0.13; 删除用户drop user 杨20.0.0.13; 权限管理 查看用户权限show grants for 杨20.0.0.13; 赋予用户权限grant all privileges on *.* to 杨localhost id…...

编程日记 2023/10/31 18:02:44

图情档核心期刊 | 北大核心、CSSCI、CSCD

中文核心期刊要目总览&#xff08;A Guide to the Core Journal of China&#xff0c; 简称北大核心&#xff09;&#xff1a; 主办单位&#xff1a;北京大学图书馆更新频率&#xff1a;北大核心在2008年之前每4年更新研究和编制出版一次&#xff0c;2008年之后&#xff0c;改为…...

编程日记 2023/10/31 18:00:43

Mac上具好用的屏幕录像工具（Omi录屏专家）Screen Recorder By Omi Mac 下载安装详细教程

Omi 录屏专家 是 Mac 上的一款出色的录音工具&#xff0c;它让您能够在Mac电脑上轻松录制和保存高质量音频。这款应用拥有简单直观的操作界面&#xff0c;无论我们水平如何&#xff0c;都可以轻松捕捉录制卓越的音质和录像视频。 该版本的 Omi 安装后可以直接支持最高 4K 60帧…...

编程日记 2023/10/31 17:59:41

牛客网刷题-(8)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…...

编程日记 2023/10/31 17:58:40

oracle 重启步骤及踩坑经验

oracle 重启步骤及踩坑经验 标准重启步骤 切换到oracle用户 su - oracle关闭监听 lsnrctl stop杀掉oracle有关进程 ps -ef|grep $ORACLE_SID|grep -v ora_|grep LOCALNO|awk {print $2}|xargs kill -9#查询pid ps -ef|grep $ORACLE_SID|grep -v ora_|grep LOCALNO|awk {p…...

编程日记 2023/10/31 17:57:39

处理mysql数据量大查询缓慢问题（最少百万才有差别）

我建了两个表&#xff0c;一个售后单表&#xff0c;一个售后商品明细表&#xff0c;都是五十个字段。 select * FROM (select id, as_id, as_date, outer_as_id, so_id, type, created, modified, status, status_name, shop_status, shop_status_name, remark, question_type,…...

编程日记 2023/10/31 17:56:38

element-plus走马灯不显示

问题描述 依赖正确&#xff0c;代码用法正确&#xff0c;但是element-plu走马灯就是不显示&#xff01;&#xff01; <div class"content"><el-carousel height"150px" width"200px"><el-carousel-item v-for"item in 4&qu…...

编程日记 2023/10/31 17:55:37

【精】UML及软件管理工具汇总

目录 1 老七工具&#xff08;规划质量&#xff09; 1.1 因果图&#xff08;鱼骨图、石川图&#xff09; 1.2 控制图 1.3 流程图:也称过程图 1.4 核查表:又称计数表 1.5 直方图 1.6 帕累托图 1.7 散点图&#xf…...

编程日记 2023/10/31 17:54:36

【uniapp+vue3】scroll-view实现纵向自动滚动及swiper实现纵向自动滚动

scroll-view本身不支持自动滚动&#xff0c;通过scroll-top属性控制滚动&#xff0c;但是不可以循环滚动 <scroll-view class"notice-bar" scroll-y"true" ref"scrollViewRef" :scroll-top"data.scrollViewTop"scroll-with-animati…...

编程日记 2023/10/31 17:53:35

this.refs[‘tagInput‘].refs.input.focus()和this.$refs[‘tagInput‘].focus()区别

this.$refs[tagInput].$refs.input.focus()和this.$refs[tagInput].focus()两者之间的选择取决于你的组件结构和如何访问DOM元素。 1.this.$refs[tagInput].$refs.input.focus(): 2.这种语法假设你的this.$refs[tagInput]是一个组件实例&#xff0c;并且这个组件实例有一个名为…...

编程日记 2023/10/31 17:52:33

电脑硬件坏了，如何维修？

在电子设备日益普及的今天&#xff0c;电脑已成为很多人生活和工作中不可或缺的工具&#xff0c;然而在使用过程中很容易遇见电脑故障之类的问题&#xff0c;这些问题十有八九来自硬件&#xff0c;那么针对电脑硬件问题&#xff0c;该如何维修&#xff1f; 一般来说&#xff0c…...

编程日记 2023/10/31 17:51:32

elementplus日期时间选择器组件显示很窄

问题描述 似乎是elementplus原生组件的宽度是和父组件相关的 只要父组件很窄就会让弹窗也很窄&#xff0c;但其实两者的宽度不必有这种限制 解决思路 打开控制条查看元素位置以及css样式的class名 发现类名为el-picker-panel__body 尝试重构 css内写样式 .el-picker-pane…...

编程日记 2023/10/31 17:50:31

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/12/14 9:57:44

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/12/14 3:12:01

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/12/14 15:17:28

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/12/13 3:10:42

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/12/9 1:41:13

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/12/5 14:12:22

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

高保真组件库：开关

一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...

编程新知 2025/12/3 12:57:00

用 FFmpeg 实现 RTMP 推流直播

RTMP&#xff08;Real-Time Messaging Protocol&#xff09; 是直播行业中常用的传输协议。 一般来说&#xff0c;直播服务商会给你&#xff1a; ✅ 一个 RTMP 推流地址&#xff08;你推视频上去&#xff09; ✅ 一个 HLS 或 FLV 拉流地址&#xff08;观众观看用&#xff09;…...

编程新知 2025/11/5 6:10:18

开源项目实战学习之YOLO11：12.6 ultralytics-models-tiny_encoder.py

👉 欢迎关注，了解更多精彩内容 👉 欢迎关注，了解更多精彩内容 👉 欢迎关注，了解更多精彩内容 ultralytics-models-sam 1.sam-modules-tiny_encoder.py2.数据处理流程3.代码架构图（类层次与依赖）blocks.py： 定义模型中的各种模块结构 ，如卷积块、残差块等基础构建…...

编程新知 2025/12/14 18:26:07