绝对定位中的fixed遮挡元素解决办法

最新推荐文章于 2025-07-13 18:38:21 发布
原创 最新推荐文章于 2025-07-13 18:38:21 发布 · 1.3w 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种解决页面中fixed元素被其他元素遮挡的方法，通过在外层添加div并设置高度，确保fixed元素的正常显示。
19088858-3633b811fec75ade.png
图片.png

底部的fixed被遮挡了
怎么解决呢
在外面套层div 然后加个height的高度 就可以了


19088858-a6aa190f8ab6d1f7.png
图片.png
19088858-9de613ad40bbb531.png
图片.png

19088858-3e07b250abe8d5f1.png
图片.png
VS2019+EasyX图形库实战：手把手教你用C语言打造消消乐小游戏（附完整源码）
最新发布
bush的博客
02-16 160
本文详细介绍了如何使用VS2019和EasyX图形库从零开始构建一个C语言消消乐小游戏。通过环境配置、数据结构设计、界面绘制、交互实现到游戏逻辑完善的完整流程，帮助开发者掌握图形编程和游戏开发的核心技巧，并附有完整源码供参考。
绝对定位元素被遮挡的解决方法
09-25
主要为大家介绍了绝对定位元素被遮挡的解决方法,涉及使用css绝对定位的使用技巧,非常具有实用价值,需要的朋友可以参考下
fixed定位元素被安卓、ios键盘顶起的解决办法
qq_30872253的博客
03-01 5405
当我们在写H5页面时经常会有fixed固定位置的元素存在,例如下图左中的"作业帮一课APP下载框",当我们input输入的时候键盘会弹起并将fixed定位的下载框顶起,如下图右,ios和安卓部分机型都会有问题,现在针对两个系统总结出来两个解决方案: 安卓端: 在安卓端,当我们呼起键盘时,窗口的高度(document.documentElement.clientHeight)会改变,也就是会触发window.onresize事件,我们根据resize事件去做相关操作: 1.windows.resize事件被触
各种气体传感器原理.zip
各种气体传感器原理.zip
css-移动端解决底部fixed定位，挡住一部分内容
qq_32838979的博客
01-03 1万+
移动端底部内容fixed定位挡住部分内容 在开发移动端页面时，经常出现的一种布局是在浏览器底部固定一个盒子，设置固定定位fixed，但是会出现这个固定定位的盒子压住上文的内容的情况，详细看下图： 蓝色的底部固定栏挡住了部分产品的内容。 这里我的底部固定栏的高度设置为8%，代码如下： <!-- html部分--> <div class="main"> <img src="1.jpeg" alt="" class="image"> </div> <
css 使用固定定位position: fixed；后遮住下方的元素（贴底之后不能被撑下去）
DSs1206的博客
12-08 4961
当你将一个元素贴底之后发现该元素不会被呢容撑下去 但是确实是贴了底 这样的话就会导致我们的内容被遮挡 最简答的方法就是给添加了fixed这个属性的元素外层添加一个div 其高度与fiexd元素等高就解决了 ...
el-table使用fixed后，最后一行被遮挡
s_156的博客
07-07 3851
el-table使用fixed后，最后一行显示不全；el-table设置fixed后，最后一行被遮挡
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
【elementUI踩坑记录】解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题
DecorateCC的博客
07-13 1418
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 3201
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
移动端键盘遮挡问题
蚁族的奋斗的博客
12-25 262
可以总结为： fix会被遮挡， 有定位只顶定位元素（absolute） 没有定位顶整个都顶 在移动端布局，尽量不要用fixed定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
不要乱用position:fixed
热门推荐
极客神殿
02-18 1万+
经常会有一个需求，在一个固定窗口内容滚动，底下有操作按钮需要固定，不随着滚动，一般第一个念头就是用固定定位position: fixed，但是fixed是以窗口为父元素去定位的，这么做肯定是错的，需要正确使用相对定位和绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&g...
css层的定位问题--父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
Baby_加油_的博客
12-12 9860
话不多说，直接上图看问题 下图是有不符合需求的问题图，整个是个弹框，下拉框是一个ul列表，要的是这个列表在最高层级，但是图中却隐藏在了里面~~ 下图是理想结果 弹框是fixed定位，列表框外有一个relative定位，列表框是absolute定位，是一个多级定位组成，按理来说，在这种情况下，子元素的层级应该是最高的，那么为什么会出现这种问题呢，经查证，一个小小的属性造成了这一问题overflo...
IE绝对定位元素神秘消失或被遮挡的解决方法
aoxi0033的博客
04-07 278
引自：http://www.jb51.net/css/34227.html 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，以及没有清除浮动时，IE6/7，FF中显示一致； 2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示； 3.当绝对定位层的邻近浮动层的宽度等于父层宽度时，以及没有清除浮动时，IE6不显示绝对定位层，IE7/F...
css div固定底部 并且不遮挡其他元素
rj2017211811的博客
02-10 1万+
问题：设置固定底部的div后会遮挡其他元素 解决方法:为该固定在底部的div设置一个height，position设置为fixed， 然后给body设置一个margin-bottom，大小为该固定在底部的div的height ...
定位界的NO.1 —— 绝对定位
weixin_34174132的博客
05-06 210
说道最后一个了。绝对定位，这家伙在定位界中优先级别最高，但是用起来却并不复杂。何为绝对定位box? 由position为absolute或fixed的dom元素产生的box，我们称之为绝对定位box。这类box是如何进行绝对定位的？position为absolute或是fixed会产生不同的效果吗？我们现在就去看看。一. position为absolute的绝对定位box用法：设置position...
UC浏览器中，设置了position: fixed 的元素会遮挡z-index值更高的同辈元素
weixin_33908217的博客
12-13 467
"UC浏览器中，设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)。" 我们使用的artDialog弹窗中，在UC浏览器中，如果页面高度大于一屏时，蒙版（fixed定位）会遮盖住弹窗（absolute），并且滚动页面的时候弹窗也会跟着页面滚动。 所以，现在打算把artDialog中的弹窗改为fixed定位 测试环境：UC浏览器 V11.7 ...
通过“css点击穿透“优化[移动端fixed导致的问题]
qq_35306736的博客
08-21 1780
移动端position:fixed 解决方案，参考https://www.cnblogs.com/Megasu/p/4329430.html CSS 解决z-index上层元素遮挡下层元素点击事件问题，参考https://www.cnblogs.com/shouke/p/12018403.html -笔者做的优化: 【原理】在 出现问题的fixed定位元素 中设置一个absolute定位的子元素，给这个子元素"随便写点内容"并设置color透明(若想改位置可以最后设透明)，最后为了不影响页面交互.
html中fixed属性,CSS中Fixed的属性
weixin_42497299的博客
06-05 602
css中常见的布局问题中定位是比较难懂的一个点比如relative和absolute定位fixed定位与relative的关系下面这个小demo演示一下fixed与父级子级同级的效果展示这三个div都是【fixed】属性,但你会发现父级的zindex这时压根没盖过子级的z-index同级的情况下是会被遮罩住的。fixedbody {min-height: 1500px;font-size: 20p...
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条
qq_44745931的博客
06-09 2807
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条 情况如下图： 头部覆盖住了滚动条 我遇到的情况分析： 前提： 头部和中间主体部分都在一个大的div元素下面，当头部采用fixed布局，中间主体部分没有采用定位且其高度超出父元素的高度时，会溢出导致滚动条的出现。 分析：此时滚动条是相对父元素出现的，不是相对于整个body的，而fixed定位是相对于整个浏览器窗体也就是body定位的，所以fixed定位的头部会压住滚动条。为了解决这个问题，就需要使滚动条是相对
CSS position 属性 绝对定位与相对定位，以及浮动
qq_43724942的博客
11-21 417
CSS position 属性 绝对定位与相对定位，以及浮动
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值