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

CSS 绝对定位问题和粘性定位介绍

news 2026/4/1 14:55:42

目录

  • 1，绝对定位问题
    • 1，绝对定位元素的特性
    • 2，初始包含块问题
  • 2，粘性定位
    • 注意点：

1，绝对定位问题

1，绝对定位元素的特性

  1. display 默认为 block。所以行内元素设置绝对定位后可直接设置宽高。
  2. 脱离文档流，所以 margin: auto 失效。
  3. 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。

2，初始包含块问题

如果参考系是初始包含块，则

设置 top 时，参考点是页面顶部，而不是浏览器首屏顶部。

设置 bottom 时，参考点是浏览器首屏的底部，而不是页面的底部。

所以有这么一道经典面试题，大家品一下：

在这里插入图片描述

2，粘性定位

一句话总结：可以认为是相对定位和固定定位的混合，定位元素在滚动到某个阈值之前表现为相对定位，之后表现为固定定位。

先看下实际应用：

在这里插入图片描述

实现起来也比较简单，只需要给粘性定位元素一个 top 值即可。当定位元素距离浏览器视口顶部到达 top 值后，就表现为固定定位。

举例：

<head><style>* {margin: 0;padding: 0;}.header {height: 200px;background-color: seagreen;}.sticky {position: sticky;top: 20px;width: 50px;height: 50px;background-color: salmon;}.content {height: 800px;background-image: linear-gradient(#e66465, #9198e5);}</style>
</head>
<body><div class="header">顶部其他元素</div><div class="sticky"></div><div class="content"></div>
</body>

在这里插入图片描述

注意点：

  1. 至少得指定 top, right, bottom,left 其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
  2. 和其他定位一样，top 优先级大于 bottom，left 优先级大于 right
  3. 粘性定位元素的包含块，设置 overflow: hidden; 会使粘性定位失效。

以上面的例子来说，下面的写法就会使粘性定位失效。

<head><style>.box {position: relative;overflow: hidden;}</style>
</head>
<body><div class="box"><div class="header">顶部其他元素</div><div class="sticky">one</div><div class="content"></div></div>
</body>

以上。

相关文章：

CSS 绝对定位问题和粘性定位介绍

目录 1&#xff0c;绝对定位问题1&#xff0c;绝对定位元素的特性2&#xff0c;初始包含块问题 2&#xff0c;粘性定位注意点&#xff1a; 1&#xff0c;绝对定位问题 1&#xff0c;绝对定位元素的特性 display 默认为 block。所以行内元素设置绝对定位后可直接设置宽高。脱离…...

编程日记 2023/12/2 12:15:03

matlab 计算两点云之间的放缩倍数

目录 一、算法原理1、原理概述2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、原理概述 放缩倍数即尺度参数，尺度参数可由２个公共点在不同坐标系下的距离之…...

编程日记 2023/12/2 12:09:58

MySQL-数据库设计与实现

目录 第1关&#xff1a;从概念模型到MySQL实现 第2关&#xff1a;从需求分析到逻辑模型 第3关&#xff1a;建模工具的使用 第1关&#xff1a;从概念模型到MySQL实现 任务描述 将已建好的概念模型&#xff0c;变成MySQL物理实现。 # 请将你实现flight_booking数据库的语句写…...

编程日记 2023/12/2 12:07:56

后端返回图片流前端展示图片

根据后端返回的图片流格式&#xff0c;选用合适方法转换 下面以base64为例 if(res.status 200) {res.data.data.forEach((item,index) > {let Array data:image/png;base64, itemlet blob this.base64toBlob(Array)let url URL.createObjectURL(blob)this.imageList.p…...

编程日记 2023/12/2 12:05:54

解决 from . import _imaging as core ImportError: DLL load failed: 找不到指定的模块。

升级pillow版本就完事了 卸载掉之前的旧版本 conda uninstall pillow升级到新的版本就解决了 pip uninstall pillow 那个错误就解决了...

编程日记 2023/12/2 12:01:51

springBoot3.2 + jdk21 + GraalVM上手体验

springBoot3.2 jdk21 GraalVM上手体验 SpringBoot2.x官方已经停止维护了&#xff0c;jdk8这次真的得换了&#x1f923; 可以参考官方文章进行体验&#xff1a;https://spring.io/blog/2023/09/09/all-together-now-spring-boot-3-2-graalvm-native-images-java-21-and-virt…...

编程日记 2023/12/2 12:00:49

Python float(input())的用法，web中的应用

float(input()) 要理解Python中的float(input())&#xff0c;可以分两部分。第一&#xff0c;input()用于获取键盘上的输入&#xff0c;该函数的返回值是一个Python字符串str类型的数据——不过输入的是什么&#xff1b;第二&#xff0c;float()函数用于将传递的参数——这里就…...

编程日记 2023/12/2 11:58:48

uniapp是否可以用elementUI等前端UI库、使用步骤以及需要注意的问题

文章目录 uniapp是否可以用elementUI等前端UI库使用方法和步骤问题如何解决 uniapp是否可以用elementUI等前端UI库 在PC端开发uniapp&#xff0c;可以用elementUI&#xff0c;因为elementUI就是PC端的。 在使用uniapp&#xff0c;选择vue2.0时&#xff0c;实测可以用nodejs16的…...

编程日记 2023/12/2 11:56:46

在vue中如何书写 SSR 友好的代码

文章目录 前言服务端的响应性​组件生命周期钩子​访问平台特有 API​跨请求状态污染​激活不匹配​自定义指令​teleports​后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;vue.js &#x1f431;‍&#x1f453;博主在前端领域还有很多…...

编程日记 2023/12/2 11:52:42

开源与闭源：数字时代大模型之辩

欢迎大家到我的博客浏览更多文章。YinKais Blog | YinKais Blog 大模型的未来&#xff1a;开源与闭源的博弈 在大模型的发展中&#xff0c;开源和闭源两种截然不同的开发模式发挥着重要的作用。开源以其技术共享的特性&#xff0c;吸引了大量人才参与&#xff0c;推动了大模型的…...

编程日记 2023/12/2 11:50:40

卷积神经网络（VGG-16）猫狗识别

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 再次检查数据3. 配置数据集4. 可视化数据 三、构建VG-16网络四、编译五、训练模型六、模型评估七、保存and加载模型八、预测…...

编程日记 2023/12/2 11:49:39

Mysql 行转列，把逗号分隔的字段拆分成多行

目录 效果如下源数据变更后的数据 方法第一种示例SQL和业务结合在一起使用 第二种示例SQL和业务结合在一起使用 结论 效果如下 源数据 变更后的数据 方法 第一种 先执行下面的SQL&#xff0c;看不看能不能执行&#xff0c;如果有结果&#xff0c;代表数据库版本是可以的&…...

编程日记 2023/12/2 11:48:38

基于单片机设计的智能水泵控制器

一、前言 在一些场景中&#xff0c;如水池、水箱等水体容器的管理中&#xff0c;保持水位的稳定是至关重要的。传统上&#xff0c;人们通常需要手动监测水位并进行水泵的启停控制&#xff0c;这种方式不仅效率低下&#xff0c;还可能导致水位过高或过低&#xff0c;从而对水体…...

编程日记 2023/12/2 11:47:37

反转链表的实现

题目描述&#xff1a; 给出一个链表的头节点&#xff0c;将其反转&#xff0c;并返回新的头节点 思路1&#xff1a;反转地址 将每个节点里的地址由指向下一个节点变为指向前一个节点 定义三个结构体指针n1,n2,n3,n1表示改后指针的地址&#xff0c;n2表示要修改结构体里next的…...

编程日记 2023/12/2 11:46:36

python之pyqt专栏6-信号与槽2

上一篇python之pyqt专栏5-信号与槽1-CSDN博客&#xff0c;我们通过信号与槽实现了点击Button&#xff0c;改变Label的文本内容。可以知道 信号是在类中定义的&#xff0c;是类的属性 槽函数是信号通过connect连接的任意成员函数&#xff0c;当信号发生时&#xff0c;执行与信号…...

编程日记 2023/12/2 11:41:30

C语言中一些特殊字符的输出

目录 %的介绍 斜杠与反斜杠 转义字符 %的介绍 int a1; 1、printf(’’%d’’,a);//输出1 2、printf(’’%%d’’,a);//输出%d 3、printf&#xff08;’’%%%d ‘’,a)//输出%1 C语言中&#xff0c;%也是转义符&#xff0c;%%相当于% 斜杠与反斜杠 首先需要明白…...

编程日记 2023/12/2 11:40:29

Opencv制作电子签名(涉及知识点：像素过滤,图片通用resize函数,像素大于某个阈值则赋值为其它的像素值)

import cv2def resize_by_ratio(image, widthNone, heightNone, intercv2.INTER_AREA):img_new_size None(h, w) image.shape[:2] # 获得高度和宽度if width is None and height is None: # 如果输入的宽度和高度都为空return image # 直接返回原图if width is None:h_ratio …...

编程日记 2023/12/2 11:35:25

【漏洞复现】大华智慧园区综合管理平台deleteFtp接口远程命令执行

漏洞描述 大华智慧园区综合管理平台deleteFtp接口存在远程命令执行，攻击者可利用该漏洞执行任意命令，获取服务器控制权限。 免责声明 技术文章仅供参考，任何个人和组织使用网络应当遵守宪法法律，遵守公共秩序，尊重社会公德，不得利用网络从事危害国家安全、荣誉和利益…...

编程日记 2023/12/2 11:34:24

Unity Image - 镜像

1、为什么要使用镜像 在游戏开发过程中&#xff0c;我们经常会为了节省 美术图片资源大小&#xff0c;美术会将两边相同的图片进行切一半来处理。如下所示一个按钮 需要 400 * 236&#xff0c;然而美术只需要切一张 74*236的大小就可以了。这样一来图集就可以容纳更多的图片。…...

编程日记 2023/12/2 11:32:22

深入Spring Security魔幻山谷-获取认证机制核心原理讲解(新版)

文/朱季谦 这是一个古老的传说。 在神秘的Web系统世界里&#xff0c;有一座名为Spring Security的山谷&#xff0c;它高耸入云&#xff0c;蔓延千里&#xff0c;鸟飞不过&#xff0c;兽攀不了。这座山谷只有一条逼仄的道路可通。然而&#xff0c;若要通过这条道路前往另一头的…...

编程日记 2023/12/2 11:31:21

新手福音：用快马生成交互式cad安装指南，轻松跨过第一道坎

作为一名CAD初学者&#xff0c;第一次安装软件时确实容易手忙脚乱。记得我当初光是找官方下载链接就花了半小时&#xff0c;安装过程中还差点勾选了捆绑软件。后来发现用InsCode(快马)平台可以快速生成交互式安装指南&#xff0c;整个过程变得特别顺畅。今天就把这个实用方法分…...

编程新知 2026/4/1 13:18:53

FRP内网穿透实战：5分钟搞定Linux服务器+Docker部署（含HTTPS配置）

FRP内网穿透实战&#xff1a;Linux服务器与Docker部署全指南 引言 在当今分布式开发和远程办公的浪潮中&#xff0c;内网穿透技术已成为开发者工具箱中不可或缺的一部分。想象一下这样的场景&#xff1a;你正在本地开发一个Web应用&#xff0c;需要让远方的同事实时预览效果&am…...

编程新知 2026/4/1 13:10:44

程序员副业指南：CSDN变现全攻略

程序员副业图谱&#xff1a;CSDN技术变现路径分析核心逻辑 围绕技术变现场景构建结构化框架&#xff0c;从技术栈适配性、市场需求匹配度、时间投入产出比三个维度建立评估模型技术咨询类副业路径技术问答悬赏CSDN问答模块的答题变现机制高价值技术领域识别&#xff08;云原生/…...

编程新知 2026/4/1 12:58:29

BGE-Large-Zh前沿探索：量子计算语义编码实验

BGE-Large-Zh前沿探索&#xff1a;量子计算语义编码实验 引言 量子计算正在重新定义计算的边界&#xff0c;而自然语言处理作为人工智能的核心领域&#xff0c;也迎来了与量子技术融合的历史性机遇。我们进行了一项创新实验&#xff1a;将BGE-Large-Zh这一强大的语义编码模型…...

编程新知 2026/4/1 11:39:43

Qwen3-14B企业知识沉淀：会议录音转写+关键结论自动提炼

Qwen3-14B企业知识沉淀&#xff1a;会议录音转写关键结论自动提炼 1. 企业知识管理的痛点与解决方案 在日常工作中&#xff0c;会议是信息交流的重要场景&#xff0c;但会议录音的整理工作往往耗时费力。传统的人工转写方式存在几个明显问题&#xff1a; 效率低下&#xff1…...

编程新知 2026/4/1 7:25:11

windows 下使用 arthas 排查接口慢的问题

文章目录1、windows 如何安装 arthas2、在排查问题之前&#xff0c;先启动 arthas3、排查某个慢接口&方法4、更多功能参考官网文档1、windows 如何安装 arthas 进入 https://github.com/alibaba/arthas/releases&#xff0c;点击 arthas-bin.zip 进行下载。 解压下载完成后…...

编程新知 2026/4/1 7:16:52

Kotlin 2.3.20 正式发布！解构声明不怕写反了

val (email, username) user你确定没写反&#xff1f; 如果 User 的属性顺序是 (username, email)&#xff0c;恭喜你&#xff0c;这段代码已经悄悄埋了一个 bug。更可怕的是&#xff0c;两个属性都是 String 类型&#xff0c;编译器不会报任何错误。 Kotlin 2.3.20 刚刚发布…...

编程新知 2026/4/1 7:04:41

ZYNQ PS侧DDR3内存配置避坑指南：以ACZ702开发板为例，手把手教你搞定MT41K128M16

ZYNQ PS侧DDR3内存配置实战&#xff1a;从硬件原理到Vivado参数设置全解析 当你第一次拿到ACZ702这样的ZYNQ开发板&#xff0c;准备配置PS侧的DDR3内存时&#xff0c;是否遇到过这样的困惑&#xff1a;为什么在Vivado中找不到DDR管脚约束选项&#xff1f;为什么按照传统FPGA的D…...

编程新知 2026/4/1 6:15:24

DevOps工具链集成：GitLab CI、Jenkins与Argo CD如何选？

DevOps工具链集成&#xff1a;GitLab CI、Jenkins与Argo CD如何选&#xff1f; 在DevOps实践中&#xff0c;工具链的选型直接影响交付效率与系统稳定性。GitLab CI、Jenkins和Argo CD作为主流工具&#xff0c;分别覆盖持续集成&#xff08;CI&#xff09;、持续交付&#xff0…...

编程新知 2026/4/1 6:03:21

Ostrakon-VL终端入门指南：如何导出结构化JSON结果用于BI工具接入

Ostrakon-VL终端入门指南&#xff1a;如何导出结构化JSON结果用于BI工具接入 1. 认识Ostrakon-VL终端 Ostrakon-VL终端是一款专为零售与餐饮行业设计的智能图像识别工具&#xff0c;它将复杂的AI技术包装成一个充满游戏感的像素风格界面。这个终端基于Ostrakon-VL-8B多模态大…...

编程新知 2026/4/1 5:18:55