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

css position属性与js滚动

news 2025/6/21 23:03:38

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

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/6/20 12:22:19

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/6/16 20:36:05

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/6/15 4:09:04

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/6/21 5:31:26

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/6/19 5:45:52

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/6/20 15:30:35

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/6/21 1:40:08

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/6/18 2:11:16

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/6/21 15:51:18