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

css position属性与js滚动

news 2026/2/8 18:53:31

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

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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/4 17:44:58

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00