position:fixed无法固定到父盒子上面的解决方案

目录

问题如图所示：

下面是错误的代码：

解决方案1：

使用fixed固定定位固定到父元素：

解决方案2：

推荐使用的其他方案（粘性定位）：

什么是粘性定位：

 粘性定位的使用：

这是我在项目中使用粘性定位的实现效果：

 实例代码及解释如下：

问题如图所示：

下面是错误的代码：

从代码中我们可以看到子盒子使用了固定定位fixed，并且设置了left和top的偏移；父盒子使用了position: relative相对定位；

        <div style="position: relative;height: 0px;"> <div  style="display: flex;margin:10px 0 ;background-color: #fff;position:fixed;left: 31%;top: -10px;"><el-button size="small" class="blue white_f" @click="saveRightData">保存</el-button><el-button size="small" class="blue white_f" style="margin-right:40px ;" @click="moveType=!moveType">{{!moveType?'开启':'关闭'}}滑动选中</el-button><div v-for="(item, index) in caseColorList" :key="index" class="color_d"><div class="col_black":style="`background-color:${item.val};border: 1px solid ${item.boder_val || 'none'};`"></div><span>{{ item.label }}</span></div></div></div>

根据这样的写法，我们可以判断出，子盒子应该根据已经设置的相对定位的最近的父盒子进行定位，但是子盒子的位置却在窗口的顶部了，其实这样的写法是错误的

子盒子（内部div）使用position: fixed;导致它相对于浏览器窗口定位，而不是相对于父盒子定位。这是因为position: fixed;的工作原理就是相对于浏览器窗口（viewport）进行定位，无论滚动页面多少，它都会保持在相同的位置。

而position: relative 对子元素的position: fixed;定位没有任何影响，因为relative和fixed是两种完全不同的定位方式。position: relative;仅用于为子元素设置绝对定位（position: absolute;）时提供一个相对于其正常位置的偏移参考点。

解决方案1：

所以我们只要把定位改成绝对定位就可以啦

        <div style="position: relative;height: 0;"> <div  style="display: flex;margin:10px 0 ;background-color: #fff;position:absolute;left: 31%;top: -10px;"><el-button size="small" class="blue white_f" @click="saveRightData">保存</el-button><el-button size="small" class="blue white_f" style="margin-right:40px ;" @click="moveType=!moveType">{{!moveType?'开启':'关闭'}}滑动选中</el-button><div v-for="(item, index) in caseColorList" :key="index" class="color_d"><div class="col_black":style="`background-color:${item.val};border: 1px solid ${item.boder_val || 'none'};`"></div><span>{{ item.label }}</span></div></div></div>

解决效果如图：

 上面这确实是一个解决方案，但是假如吧，我只想用这个固定定位来实现呢？

因为固定定位是相对于浏览器窗口进行定位的，那我需要怎么样才能解决呢？怎样作用于父盒子上呢？

使用fixed固定定位固定到父元素：

在此之前呢,我们先看看文档，看他们是怎么对这些进行定义的：

下面是文档中关于常用的几种定位的描述：

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

当你看到这个的时候你应该就知道怎么解决了吧，所以说多看文档，前端的东西很多，而且是与时俱进的，文档啥的一直在更新变更，或许哪一天你常用的属性就被移除废弃了。

其中文档中讲述了：当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

毛主席曾言：实践是检验真理的唯一标准，那我们就来实践一下吧。

解决方案2：

我们去掉了父盒子的相对定位，但是加上了transform进行了1:1的缩放，为1是不改变原来盒子的大小，其实也可以使用transform:rotate(360deg);进行旋转回归原位也是可以的哦

        <div style="height: 0;transform:scale(1)"> <div  style="display: flex;margin:10px 0 ;background-color: #fff;position:fixed;left: 31%;top: -10px;"><el-button size="small" class="blue white_f" @click="saveRightData">保存</el-button><el-button size="small" class="blue white_f" style="margin-right:40px ;" @click="moveType=!moveType">{{!moveType?'开启':'关闭'}}滑动选中</el-button><div v-for="(item, index) in caseColorList" :key="index" class="color_d"><div class="col_black":style="`background-color:${item.val};border: 1px solid ${item.boder_val || 'none'};`"></div><span>{{ item.label }}</span></div></div></div>

下面是效果，和使用了绝对定位效果是一样的：

推荐使用的其他方案（粘性定位）：

如果你想定位到父盒子身上，并且能够实现固定定位的效果，我更推荐用下面这个（粘性定位），可能比较用的少吧，但是用起来真的很方便。

什么是粘性定位：

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

简单来讲的话就是：

  • 一个元素在滚动到某个位置之前为相对定位，然后当它达到指定的偏移位置时，它会“粘”在那里（就像固定定位一样，通常是视口的顶部或底部），直到滚动出视口。
  • 需要注意的是，为了使粘性定位生效，元素必须有一个top、right、bottom或left属性的非auto值。

sticky

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）

 粘性定位的使用：

这是我在项目中使用粘性定位的实现效果：

直接附上

 

 实例代码及解释如下：

该代码只体现了主要部分，其中的h2标签就是需要进行粘性的部分（就是给需要粘性定位的盒子加上这个就行了），实现的效果上面已经有了哦，就不多说了。

在 viewport 视口滚动到元素 top 距离小于 n px 之前，元素为相对定位。之后，元素将固定在与顶部距离 n px 的位置，直到 viewport 视口回滚到阈值以下。当元素“粘”在视口顶部时，这个top值决定了元素与视口顶部的距离。

-webkit-sticky解释：这是一个WebKit特有的（也就是Safari和早期版本的Chrome等浏览器使用的渲染引擎）属性；主要用于确保样式在这些浏览器上正常工作。但是，现代浏览器大多已经支持标准的sticky属性，因此-webkit-sticky主要用于向后兼容。

  <div id="divWidth" v-for="(item,index) in rightData" :key="index"><h2 style="  position: -webkit-sticky; position: sticky;top: -1px;background-color: #fff;">{{ item.wareName }}</h2><div style="margin: 10px 0;" v-for="(v,i) in item.wareLocatorRowList" :key="i">//自己的内容</div></div>

最后，希望大家多看文档哈，也希望适当的学习新知识，能够相较于昨天有一点点的进步！

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

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

相关文章

Leetcode—287. 寻找重复数【中等】（快慢指针算法）

Leetcode—287. 寻找重复数【中等】（快慢指针算法）

2024每日刷题&#xff08;136&#xff09; Leetcode—287. 寻找重复数 快慢指针算法思想 low fast 时&#xff0c;快慢指针相遇&#xff0c;low 走过的距离是初始点&#xff08;0&#xff09;到环状开始的点 &#xff08;x&#xff09; 加上 环状开始的点&#xff08;x&…
阅读更多...
LeetCode2390从字符串中移除星号

LeetCode2390从字符串中移除星号

题目描述 给你一个包含若干星号 * 的字符串 s 。在一步操作中&#xff0c;你可以&#xff1a;选中 s 中的一个星号。移除星号 左侧 最近的那个 非星号 字符&#xff0c;并移除该星号自身。返回移除 所有 星号之后的字符串。注意&#xff1a;生成的输入保证总是可以执行题面中描…
阅读更多...
详细分析Vue3中的ref（附Demo）

详细分析Vue3中的ref（附Demo）

目录 前言1. 基本知识2. Demo 前言 由于新项目涉及Vue3&#xff0c;本着探究问题的本质研究所不会的疑问 1. 基本知识 ref 是 Vue 3 中用于创建响应式数据的函数 接收一个初始值并返回一个包含了该值的响应式引用对象与 Vue 2.x 中的 data 属性不同&#xff0c;ref 返回的是…
阅读更多...
【已解决】力扣打不开

【已解决】力扣打不开

表现&#xff1a; 1.访问国内其他网站都没有问题 2.访问github也能成功 3.wifi没有问题 4.连接同网络的其他主机能打开 唯独力扣打不开&#xff0c;可能是DNS解析错误 》自己网络配置问题 解决办法【亲测可行】 找可用的hosts 打开站长之家&#xff0c;进行DNS查询&#xff…
阅读更多...
卷积网络项目：实现识别鲜花四分类对比LeNet5、VGG16、ResNet18、ResNet34分类网络

卷积网络项目：实现识别鲜花四分类对比LeNet5、VGG16、ResNet18、ResNet34分类网络

卷积四分类项目 Gitee传送门 分类目标选取 鲜花 杏花 apricot_blossom桃花 peach_blossom梨花 pear_blossom梅花 plum_blossom 模型选择 卷积 LeNet5VGG16ResNet18ResNet34 以图搜图 获取相似度前10的搜图结果 数据清洗 鲜花四分类 删除非图片文件 删除重复图片 整理…
阅读更多...
【JavaWeb】前后端分离SpringBoot项目快速排错指南

【JavaWeb】前后端分离SpringBoot项目快速排错指南

1 发起业务请求 打开浏览器开发者工具&#xff0c;同时显示网络&#xff08;Internet&#xff09;和控制台&#xff08;console&#xff09; 接着&#xff0c;清空控制台和网络的内容&#xff0c;如下图 然后&#xff0c;点击你的业务按钮&#xff0c;发起请求。 首先看控制台…
阅读更多...
【C#进阶】简单数据结构类

【C#进阶】简单数据结构类

简单数据结构类 文章目录 1、Arraylist1、ArrayList的本质2、声明3、增删查改4、装箱拆箱思考 背包售卖 2、Stack1、Stack的本质2、声明3、增取查改4、遍历思考 计算一个数的二进制 3、Queue1、Queue的本质2、声明3、增取查改4、遍历思考 每隔一段时间打印一条消息 4、Hashtab…
阅读更多...
如何加密保护U盘？U盘加密方法盘点

如何加密保护U盘？U盘加密方法盘点

U盘是目前最常用的移动存储设备&#xff0c;可以帮助我们存储大量数据。而为了保护数据安全&#xff0c;我们需要加密保护U盘。下面我们就来盘点一下U盘加密的方法。 BitLocker加密 BitLocker是Windows的一种磁盘保护工具&#xff0c;通过加密整个磁盘来保护数据&#xff0c;同…
阅读更多...
基于Springboot的校园疫情防控信息管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的校园疫情防控信息管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的校园疫情防控信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…
阅读更多...
Vscode编辑器 js 输入log自动补全

Vscode编辑器 js 输入log自动补全

最近换了新电脑&#xff0c;新下载了Vscode&#xff0c;记录一下设置项。 Vscode 版本 想要的效果 js文件中输入log&#xff08;点击tab键&#xff09;&#xff0c;自动补全为 console.log() Vscode 文件》首选项》设置 搜索&#xff1a;snippets Emmet: Show Suggestions…
阅读更多...
暗区突围TWITCH掉宝领测试资格后，steam激活显示是无效激活码

暗区突围TWITCH掉宝领测试资格后，steam激活显示是无效激活码

自《暗区突围》测试启动以来&#xff0c;吸引了大量玩家关注&#xff0c;特别是通过在Twitch平台上观看直播即可获得测试资格的活动&#xff0c;更是掀起了热潮。然而&#xff0c;部分玩家在成功获得激活码后&#xff0c;在Steam平台激活时遭遇了“无效激活码”的问题。本文将提…
阅读更多...
nginx 配置域名SSL证书HTTPS服务

nginx 配置域名SSL证书HTTPS服务

下载 上传根目录 /home/wwwroot/xx.com/ssl 从新执行 添加域名命令 选择添加SSL SSL Certificate file: 填写 完整目录 PEM文件地址 SSL Certificate Key file:填写 完整目录 key文件地址
阅读更多...
python 对矩阵与矩阵之间对应位置的元素，做softmax操作，代码实战

python 对矩阵与矩阵之间对应位置的元素，做softmax操作，代码实战

1.对矩阵中对应位置的元素&#xff0c;做softmax 对于一个向量&#xff0c;softmax函数会对其中每一个元素进行指数运算&#xff0c;然后除以所有元素指数和的结果。当将其应用到多个矩阵的相应位置上时&#xff0c;我们实际上是在对每个位置的一组数&#xff08;从各个矩阵的同…
阅读更多...
45.WEB渗透测试-信息收集-域名、指纹收集（7）

45.WEB渗透测试-信息收集-域名、指纹收集（7）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;计算机王-CSDN博客 WEB指纹&#xff1a;Web指纹也叫web应用指纹。由于所使用的工具、技术…
阅读更多...
PHP 自提时间

PHP 自提时间

前端: 后台设置: 代码: public function getBusinessHour(){// 需求单门店$data (new StoreModel())->limit(1)->select()->toArray();$days explode(,, $data[0][shop_hours]);$businessHours $days[1];// 使用 explode 分割字符串&#xff0c;获取开始和结束时…
阅读更多...
nginx 发布静态资源

nginx 发布静态资源

一. nginx 发布静态资源 在nginx中nginx.conf配置文件中添加内容如下&#xff1a; server {listen 90;server_name localhost;# 配置静态资源文件&#xff0c;就可以访问了location / {root /home/fooie-shop;index index.html;}# 配置音频和图片资源location /imoo…
阅读更多...
企业内部文化社区究竟有哪些好处？

企业内部文化社区究竟有哪些好处？

首先&#xff0c;我们来了解下&#xff0c;企业内耗是什么? 在企业文化管理中&#xff0c;内耗是一个常见的问题&#xff0c;它会影响企业的团队协作、执行效率和绩效表现。在2023《哈佛商业评论》中国年会上&#xff0c;北大汇丰商学院管理实践教授陈玮分享了他对组织管理的…
阅读更多...
冯喜运：5.14今日黄金原油涨跌走势分析操作建议

冯喜运：5.14今日黄金原油涨跌走势分析操作建议

【黄金消息面分析】&#xff1a;本周黄金市场将迎来关键的美国通胀数据&#xff0c;包括周二的生产者价格指数(PPI)和周三的消费者物价指数(CPI)。这些数据对美联储的政策路径至关重要&#xff0c;可能会影响市场对利率调整的预期。目前&#xff0c;现货黄金价格小幅上涨&#…
阅读更多...
使用java.io库序列化Java对象

使用java.io库序列化Java对象

在我们使用诸如Redis这类缓存系统时&#xff0c;我们往往会存在如下需求&#xff1a;将Java对象保存到Redis缓存中&#xff0c;然后在其他机器上还原回来。 Json方案 我们可以引入Json库等方式&#xff0c;将Java对象序列化为Json字符串来实现这个目的&#xff0c;但是这样的…
阅读更多...
《四》系统模块整体功能关联与实现

《四》系统模块整体功能关联与实现

在上一篇里&#xff0c;我们完成了动作的创建&#xff0c;那么这一次&#xff0c;我们把它加载到界面上&#xff0c;把需要是实现的动作都加上。 MyWord::MyWord(QWidget *parent): QMainWindow(parent) {mdiAreanew QMdiArea;mdiArea->setHorizontalScrollBarPolicy(Qt::S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023