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

最新推荐文章于 2022-10-07 10:19:37 发布
最新推荐文章于 2022-10-07 10:19:37 发布
阅读量1.3w 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41812254/article/details/101574125
版权
19088858-3633b811fec75ade.png
图片.png

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


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

19088858-3e07b250abe8d5f1.png
图片.png
想快快长大
关注
css-移动端解决底部fixed定位，挡住一部分内容
qq_32838979的博客
01-03 1万+
移动端底部内容fixed定位挡住部分内容 在开发移动端页面时，经常出现的一种布局是在浏览器底部固定一个盒子，设置固定定位fixed，但是会出现这个固定定位的盒子压住上文的内容的情况，详细看下图： 蓝色的底部固定栏挡住了部分产品的内容。 这里我的底部固定栏的高度设置为8%，代码如下： <!-- html部分--> <div class="main"> <img src="1.jpeg" alt="" class="image"> </div> <
移动端H5文本框获取焦点唤起键盘时，fixed或absolute定位的元素被键盘顶上去的问题解决方案
艾欢欢的博客
12-10 2079
场景 看下面两张图，文本框（ input 或 textarea ）获取焦点时，手机自带的键盘会被唤起，从而导致视口高度变小，从而导致处于 fixed 定位且设置 bottom 属性的元素，会被键盘顶上去，浮于键盘上方。（由于手机内部机制不同，仅安卓出现这种问题） 解决方案 思路 监听当前视口的变化： 当视口大小发生改变时，判断变化后的视口高度是否小于初始的窗口高度，是则隐藏相关元素；反之，显示相关元素 主要代码 const WIN_HEIGHT = window.innerHeight window
css 使用固定定位position: fixed；后遮住下方的元素（贴底之后不能被撑下去）
DSs1206的博客
12-08 4462
当你将一个元素贴底之后发现该元素不会被呢容撑下去 但是确实是贴了底 这样的话就会导致我们的内容被遮挡 最简答的方法就是给添加了fixed这个属性的元素外层添加一个div 其高度与fiexd元素等高就解决了 ...
fixed元素遮挡其他元素
s172292112的博客
10-07 626
fixed元素遮挡其他元素
【vue】vue 解决position:fixed 遮盖下方元素问题
Meditation_Crazy
06-13 2334
前言 转载自：https://blog.csdn.net/weixin_40425415/article/details/111595120
fixed定位元素被安卓、ios键盘顶起的解决办法
qq_30872253的博客
03-01 4452
当我们在写H5页面时经常会有fixed固定位置的元素存在,例如下图左中的"作业帮一课APP下载框",当我们input输入的时候键盘会弹起并将fixed定位的下载框顶起,如下图右,ios和安卓部分机型都会有问题,现在针对两个系统总结出来两个解决方案: 安卓端: 在安卓端,当我们呼起键盘时,窗口的高度(document.documentElement.clientHeight)会改变,也就是会触发window.onresize事件,我们根据resize事件去做相关操作: 1.windows.resize事件被触
绝对定位元素被遮挡的解决方法
09-25
在实际开发中，对于复杂的页面布局，解决绝对定位元素被遮挡的问题可能需要更深入地分析CSS的层级机制和其他影响布局的属性。熟练运用这些知识，才能有效避免元素间的层级冲突，制作出布局合理、视觉效果优秀的网页...
IE绝对定位元素神秘消失或被遮挡的解决方法
09-25
"IE绝对定位元素神秘消失或被遮挡的解决方法"这一问题主要涉及到CSS中的相对定位、绝对定位以及浮动元素的相互影响。 首先，我们需要理解相对定位和绝对定位的概念。相对定位是相对于元素本身的位置进行偏移，而...
深入学习CSS中如何使用定位(小结)
11-21
- 和固定定位一样，绝对定位的元素也脱离了正常文档流，不占据任何空间，可能会覆盖其他元素。 了解这些定位方式后，设计师可以根据需求选择合适的定位策略。例如，导航栏常使用固定定位，使其在页面滚动时始终...
解决移动端 ios 系统键盘遮挡的问题
01-20
CSS也可以帮助解决这个问题，例如设置`position: fixed`和`bottom`属性可以使元素始终固定在屏幕底部，即使键盘弹出也不会被遮挡。但这种方法并不总是有效，因为键盘弹出时可能会改变页面的整体布局。 5. **使用第...
el-table使用fixed后，最后一行被遮挡
s_156的博客
07-07 3168
el-table使用fixed后，最后一行显示不全；el-table设置fixed后，最后一行被遮挡
前端使用fixed布局固定导航栏会被正文组件遮挡的问题
weixin_46013766的博客
02-01 5727
使用fixed布局组件被其它组件遮挡问题
fixed元素遮挡下面元素的问题
热门推荐
Nana_9457的博客
10-15 1万+
网页实际开发中会遇到fixed置顶元素，有时需要由后端决定是否显示。 所以在布局上注意fixed元素遮挡问题。 具体解决办法如下： html &amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;quot;fixed_wrap&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;am
display 垂直居中
bangxionger9224的博客
06-12 292
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-co...
position:fixed的元素定位到滚动区域，会被覆盖
Y_G_G的博客
06-18 7640
目的 想让position:fixed 的元素定位在页面底部 问题 华为、oppo旧款手机上会被覆盖 原因 误将position:fixed 的元素定位在滚动区域中 解决 position:fixed 的元素定位根元素body上 问题说明 起初遇到这个问题实在是没想到是定位，找了很久才发现…以后还是乖乖滴把footer fixed 在body上吧
fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法
NGLLLLLL的博客
07-10 1131
fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法 最近由于项目需要给el-table固定表头，于是就给el-table-column添加了fixed属性，表头成功固定，但是el-dialog弹框却被覆盖了，呜呜呜~ 解决办法：父元素设置成固定定位时，子元素弹出框设置:modal-append-to-body='false’即可 若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最
element-ui table 组件 fixed 布局遮盖滚动条
qq_36437172的博客
10-27 4905
问题描述：在 element-ui 的 table 组件中，给前两列设置了 fixed 属性，让前两列可以固定，同时设置操作列固定在右侧，不随着滚动条滚动移动，结果发现设置后，固定列的滚动条被遮挡了一部分。 效果图如下： 解决方案： .el-table__fixed, .el-table__fixed-right { height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式 bottom: 10px !importa
css 绝对定位元素挡住下方元素点击解决办法
fanyanjiang的博客
06-03 4736
pointer-events:none; 表示它将捕获不到任何点击，而只是让事件穿透到它的下面。 pointer-events:auto; 表示鼠标不会穿透当前层, 鼠标事件仍会监听这个父元素下面的子元素。 外层div如果已经绝对或相对定位了（并且本层有点击事件或其他执行事件继续有效，这两步执行后，外层的父元素上的事件会正常执行，同时下层元素也可点击）： position: absolute; z-index:9999 pointer-events: none; 内层div设置绝对定位：
vue 解决position:fixed 遮盖下方元素问题
weixin_40425415的博客
12-23 8488
方法1： 下方的元素第一个设置 margin-top为fixed元素的高度即可。 方法2： 在fixed元素后添加一个空的div盒子，并将高度设置为fixed元素的高度。 延伸扩展：如果fixed高度不确定，该如何处理？ 需要动态获取盒子高度并监听其变化，然后动态设置元素的style。 <div> <div id="header" style="position: fixed"> //设置fixed的元素 </div...
ant-popover组件被遮挡如何解决
最新发布
07-23
1. 调整定位方式：Ant Popover组件默认使用绝对定位（position: absolute），您可以尝试修改为固定定位（position: fixed），以确保它始终可见且不会被其他元素遮挡。 2. 调整层级关系：确认Ant Popover组件的z-...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值