css position属性与js滚动

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

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,滚动时平滑过渡。

图 平滑滚动示意图

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

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

相关文章

【年终特惠】全流程HEC-RAS 1D/2D水动力与水环境模拟技术案例实践及拓展应用

水动力与水环境模型的数值模拟是实现水资源规划、环境影响分析、防洪规划以及未来气候变化下预测和分析的主要手段。然而&#xff0c;一方面水动力和水环境模型的使用非常复杂&#xff0c;理论繁复&#xff1b;另一方面&#xff0c;免费的水动力和水环境软件往往缺少重要功能&a…

Failed to restart sshd.service: Unit sshd.service not found

Failed to restart sshd.service: Unit sshd.service not found.出现这个问题以及远程链接mobaxterm出现 Network error: Connection refused的解决方案如下 其实出现问题二就是kail2018里面的ssh服务未开启&#xff0c;和问题一是同样的&#xff0c;故汇集写在一篇帖子中&…

【兔子王赠书第4期】用ChatGPT轻松玩转机器学习与深度学习

文章目录 前言机器学习深度学习ChatGPT推荐图书粉丝福利尾声 前言 兔子王免费赠书第4期来啦&#xff0c;突破传统学习束缚&#xff0c;借助ChatGPT的神奇力量&#xff0c;解锁AI无限可能&#xff01; 机器学习 机器学习是人工智能领域的一个重要分支&#xff0c;它的目的是让…

二叉树问题——前/中/后/层遍历(递归与栈)

摘要 博文主要介绍二叉树的前/中/后/层遍历(递归与栈)方法 一、前/中/后/层遍历问题 144. 二叉树的前序遍历 145. 二叉树的后序遍历 94. 二叉树的中序遍历 102. 二叉树的层序遍历 二、二叉树遍历递归解析 // 前序遍历递归LC144_二叉树的前序遍历 class Solution {publi…

2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛成功举行...

2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛于10月21日在湖南长沙成功举行。本次论坛聚焦大模型时代的智能化软件新生态以及相应的软件工程新范式&#xff0c;邀请了多位来自学术界和工业界的专家进行分享和交流&#xff0c;共设置了5个主题报告和1个Pan…

SpringBoot SerializationUtils克隆(反序列化) 类加载器不一致问题(ClassCastException)

问题分析 在SpringBoot中使用 org.apache.commons.lang.SerializationUtils.clone 方法时&#xff0c;发现克隆出来的类强转对应类时发生类型不一致的错误&#xff0c;经过检测发现两个看似相同的类的类加载器不一致 场景 报错信息 java.lang.ClassCastException: com.tianq…

OSEK OS介绍(一)

目录 1.OSEK OS架构 2.OSEK Task Management 2.1 Basic task&#xff1a; 2.2 Extended task 2.3 任务状态机 2.4 任务优先级 3.调度策略 3.1 完全抢占策略 3.2 非抢占式调度 3.3 混合式调度 4. Application Mode OSEK&#xff0c;汽车电子开放式系统及其接口&#…

KT6368A蓝牙芯片的4脚也就是蓝牙天线脚对地短路了呢?是不是坏了

一、问题简介 KT6368A芯片的4脚&#xff0c;也就是蓝牙天线脚&#xff0c;万用表测量对地短路了呢&#xff1f;是不是芯片坏掉了&#xff0c;能不能重新寄样品给我。 详细说明 首先&#xff0c;芯片没有坏&#xff0c;遇到自己不懂的地方&#xff0c;不要轻易的去怀疑。 而是…

基于计算机视觉的 Transformer 研究进展

论文地址&#xff1a; https://kns.cnki.net/kcms/detail/11.2127.tp.20211129.1135.004.html 18页&#xff0c;74篇参考文献 目录 摘 要 1 Transformer 基本原理 1.1 编码器-解码器 1.2 自注意力 1.3 多头注意力 2 在计算机视觉领域的应用 2.1 图像分类 2.1.1 iGPT …

无需更换vue-cli 脚手架 uniapp-搭建项目-H5-低版本安卓IOS兼容问题(白屏)(接口请求异常)

✨求关注~ &#x1f4bb;博客&#xff1a;www.protaos.com I. 简介 A. UniApp项目概述 B. 白屏和接口请求异常问题的背景 II. 白屏问题 A. 问题描述 1、uniapp 打包H5内嵌入APP内、低版本手机系统访问白屏问题 B. 问题根本原因 1、低版本手机系统 自带的webview内核不支持ES6语…

C++进阶语法——智能指针【学习笔记(五)】

文章目录 1、智能指针简介1.1 原始指针&#xff08;raw pointer&#xff09;的⼀些问题1.2 智能指针&#xff08;smart pointers&#xff09; 2、智能指针&#xff08;smart pointers&#xff09;——unique_ptr2.1 unique_ptr 的声明2.2 unique_ptr 的函数2.3 ⾃定义类型使⽤ …

0004net程序设计-抗疫物资

文章目录 **摘** **要**目 录系统设计开发环境 摘 要 近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;抗疫物资管理系统利用计算机网络实现信息化管理&#xff0c;使整个抗疫物资管理…

Linux下GPIO和看门狗应用编程

文章目录 GPIO应用编程看门狗应用编程 GPIO应用编程 应用层操控硬件可以通过操作这些硬件的设备文件来进行&#xff0c;设备文件是各种硬件设备向应用层提供的一个接口&#xff0c;应用层通过对设备文件的I/O操作来操控硬件设备。设备文件通常在/dev/目录下&#xff0c;该目录…

Yolo-Z:改进的YOLOv5用于小目标检测

目录 一、前言 二、背景 三、新思路 四、实验分析 论文地址&#xff1a;2112.11798.pdf (arxiv.org) 一、前言 随着自动驾驶汽车和自动驾驶赛车越来越受欢迎&#xff0c;对更快、更准确的检测器的需求也在增加。 虽然我们的肉眼几乎可以立即提取上下文信息&#xff0c;即…

延迟队列实现方案总结

日常开发中&#xff0c;可能会遇到一些延迟处理的消息任务&#xff0c;例如以下场景 ①订单支付超时未支付 ②考试时间结束试卷自动提交 ③身份证或其他验证信息超时未提交等场景。 ④用户申请退款&#xff0c;一天内没有响应默认自动退款等等。 如何处理这类任务&#xff0c;最…

MAC缓解WebUI提示词反推

当前环境信息&#xff1a; 在mac上安装好stable diffusion后&#xff0c;能做图片生成了之后&#xff0c;遇到一些图片需要做提示词反推&#xff0c;这个时候需要下载一个插件&#xff0c;参考&#xff1a; https://gitcode.net/ranting8323/stable-diffusion-webui-wd14-tagg…

66 内网安全-域横向批量atschtasksimpacket

目录 演示案例:横向渗透明文传递at&schtasks 案例2-横向渗透明文HASH传递atexec-impacket案例3-横向渗透明文HASH传递批量利用-综合案例5-探针主机域控架构服务操作演示 传递攻击是建立在明文和hash值的一个获取基础上的攻击&#xff0c;也是在内网里面常见协议的攻击&…

一道简单的C#面试题

试题&#xff1a; 抽顺序问题&#xff1a;有10位面试者&#xff0c;需要随机抽号面试。 1&#xff09;总共十个号数&#xff0c;用数组表示&#xff1b; 2&#xff09;每一位面试者输入1开始抽签&#xff0c;然后得到抽签号&#xff0c;输入2结束抽签&#xff1b; 3&#x…

Linux玩物志:好玩却无用的软件探秘

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; 我们已经学习了yum指令&#xff0c;可以在Linux中安装一些软件的指令。下面我们就盘点一些可玩性很高但是却没有什么用的软件&#xff0c;在枯燥的学习中增添一丝乐趣&#xff01; For…

CSS宽度100%和宽度100vw之间有什么不同?

vw和vh分别代表视口宽度和视口高度。 使用width: 100vw代替的区别在于width: 100%&#xff0c;虽然100%将使元素适合所有可用空间&#xff0c;但视口宽度具有特定的度量&#xff0c;在这种情况下&#xff0c;可用屏幕的宽度 。 如果设置样式body { margin: 0 }&#xff0c;则1…