弹出框被滚动条遮住的问题

最新推荐文章于 2023-08-09 20:08:53 发布
最新推荐文章于 2023-08-09 20:08:53 发布
阅读量1.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuji0517/article/details/106491396
版权

我在使用vue做前端时，遇到了这个问题，请教各位有没有办法解决呢？

滚动条改到树组件上试试

子元素的z-index不能高于父元素z-index值，包括父元素的兄弟元素，就算强制设置也是没有效果的。

把悬浮功能放到外层，就可以通过设置z-index，让内容覆盖到滚动条上；listitem的hover事件需要写个js方法，计算一下鼠标在listitem的位置，把坐标加到悬浮框上

如果你用的element tooltip应该不会出现这个情况（正常情况会在body里面创建一个z-index > 2000的div来显示内容，有可能是你重写了默认样式），不行就设置tooltip在左边显示. 

改一下这俩的层级关系   让弹出框的z-index大于滚动条的，或者干脆这种要挡的让它往左边弹出,资源代下载

各位好，问题解决了，我把树控件的 position:fixed去掉，就可以了。不过你们的方案也应该是可行的，谢谢各位的指点

liuji0517
关注
html的浮层移动效果,移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法...
weixin_39855869的博客
06-04 3426
在现在的前端页面中，尤其是移动端，经常会需要将或者是模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。“回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。...回复主题...实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮在最下方为例(悬浮同理)，当页面滑到最下方的时候，由于是fixed...
bootstrap弹出多个模态框_Bootstrap同时弹出多个模态窗口Modal时的几个问题
weixin_31423913的博客
12-29 1376
Bootstrap中的modal组件是使用率比较高的组件之一，可modal本身对于同一个页面同时弹出多个modal的情况支持并不是很好，有些人说应该尽量避免同时弹出多个modal，应该关闭之前的modal再弹出新的modal，确实，弹出多个modal会导致页面看起来比较混乱，但不管出于什么原因，我们经常还是会碰到需要弹出多个modal的情况。首先，碰到的第一个问题就是如果弹出多个modal，会出现...
自定义滚动条后textarea resize拖拉位置出现边框
weixin_41552521的博客
06-05 625
CSS3自定义滚动条样式 自定义滚动条实现 此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 ::-we
android:scrollbarStyle属性及滚动条和分割线覆盖问题
weixin_30725467的博客
09-25 128
android:scrollbarStyle可以定义滚动条的样式和位置，可选值有insideOverlay、insideInset、outsideOverlay、outsideInset四种。 其中inside和outside分别表示是否在view的padding区域内，overlay和inset表示覆盖在view上或是插在view后面，所以四种值分别表示： insideOverlay：默认值...
为弹框设置滚动条
weixin_40719948的博客
10-22 9725
在css样式中： .popupContent{     max-height: 150px;     overflow-y: auto; }
QScrollBar滚动条
WChang的博客
08-12 939
catalog部件内自带样式表宽度 部件内自带 很多部件里，会自带滚动条，比如tablewidget里就自带 滚动条的产生，是在部件内部的！！ 比如，这个部件是100*100。 比如当内容是[>100, >100]时，两个滚动条会自动产生，且 此时这个部件还是[100 * 100]的大小！！！ 他是产生在部件里面的，==即，遮挡了部件里的内容。 样式表 宽度 QTableWidget w; w.setStyleSheet( " QScrollBar::vertical{ " " ba
微信小程序实现弹出菜单功能
01-03
遮罩优先级在弹出框之下； 弹出框内标签的设置； 滚动栏滚动条的隐藏 如何解决？ 弹性布局，横向，三者平分整栏; 状态监听点击事件，数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index； 弹性布局...
layui layer select 选择被遮挡的解决方法
10-16
然而，在实际应用中，当layer弹窗内的select组件展开时，有时会出现被其他元素遮挡的问题，这会严重影响用户体验。为了解决这一问题，我们可以采取以下策略。 首先，我们要理解导致select被遮挡的原因。通常，layer...
滚动视图 解决弹出键盘遮住输入框的问题 实例解析
IOS
12-13 970
滚动视图的制作 以及常见的问题
Bootstrap模态框（modal）多层叠加弹出、模态框样式效果设置等问题处理（持续更新帖）
Vinnie.Wu的博客
08-03 3045
在bootstrap框架使用过程中，模态框可能是最为常用的组件之一。通过弹出模态框，可以满足多种会话应用层场景，使得业务流程更加合理和人性化。今天对模态框常用的两个小功能做下记录，分别为多模态框弹出顺序设置和模态框弹出窗体可拖动设置。 一、多弹出框顺序设置 在一个场景内，可能需要弹出两个或者更多模态框，而每个模态框的弹出需要一定的逻辑顺序，这个时候要求我们合理设置弹出顺。 解决办法：最简单的处理办法就是将多个模态框的div在页面上设置相应的顺序（自上而下的排列顺序皆可），越往下排序，则弹出优先级越高（
element ui 组件el-scrollbar
忙碌的菠萝
11-02 1322
el-scrollbar 组件 当组件中内容过多时，展开后会产生滚动条影响外部整体样式，这个时候需要将滚动条放在组件内部，不让其变化影响其他组件。el-scrollbar可以实现这个功能 el-scrollbar实现菜单内部滚动条 <el-scrollbar style="height:100%;"> <el-menu class="sidebar-el-menu" default-active="1-4-1" @
fastadmin 自定义弹窗大小,遮罩关闭弹窗问题
我不晓得
08-09 648
fastadmin 自定义弹窗大小,遮罩关闭弹窗问题
fastadmin更改默认表格按钮的弹窗大小
Turbo
07-18 954
fastadmin更改默认表格按钮的弹窗大小。
初识FastAdmin中的弹出窗口的功能
守护大白菜的博客
08-22 4796
一张图解析FastAdmin中的弹出窗口的功能 功能描述 弹出窗口是FastAdmin中最常用的功能之一，FastAdmin中默认生成的CRUD中的编辑、添加和删除的弹窗都是基于Layer弹层组件实现的，FastAdmin在此基础上进行了扩展和二次开发，除了Layer原有的功能外，还有部分FastAdmin特有的功能。 首先我们先来看看最常用的编辑和添加弹窗。在CRUD后的列表中默认的添加和编辑按钮会自动绑定事件，如果需要手动弹窗，我们可以使用Fast.api.open(url, tit..
fastadmin两种自定义弹出层/弹出框宽高/大小的方法
hzhairuntao的博客
11-30 9596
第一种，在表格里面点击按钮触发的弹出层，这是在js文件添加按钮，然后点击触发弹出层。 自定义弹出层的代码如下： 如图，我是在表格中新加来一个“二维码”的按钮，用来点击触发弹出层，自定义弹出层大小需要添加参数： extend:'data-area=["860px","730px"]', 依次是 宽 和 高 { field: 'buttons', width: "120px..
fastadmin:在新增页面，打开弹窗单选，参数回传
weixin_46001736的博客
02-27 6441
fastadmin:在新增页面，打开弹窗单选，参数回传
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）
xiaoxin_su的博客
12-15 5308
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）
解决layui弹窗下的下拉选择框被遮挡或显示不全问题
热门推荐
LMXQH的博客
02-01 5万+
问题：在做后台的时候想要实现这样一个功能，点击弹出一个窗口，窗口是下拉选择框，给用户选择。用到了layui，但是却发现，弹窗虽然固定了高宽，但是里面的下拉框，在显示的时候却被弹窗挡住了，导致滚动条出现。 如下图： 后来发现只要是不用layui提供的下拉选择框，是不会出现被遮挡的问题的。 但是我还就非要用了，怎么滴了吧... 研究很久，怎么解决呢？
el-dialog弹出框有滚动条
最新发布
09-01
是的，el-dialog弹出框可以包含滚动条。你可以通过设置CSS样式或使用el-dialog组件提供的属性来实现这一效果。 如果你希望在弹出框内容过长时出现滚动条，可以在el-dialog组件上添加一个样式属性，例如： ```html <el-dialog :visible="dialogVisible" class="dialog-with-scroll"> <!-- 弹出框内容 --> </el-dialog> <style> .dialog-with-scroll .el-dialog__body { overflow-y: auto; } </style> ``` 这样即可在弹出框内容超出弹出框高度时显示垂直滚动条。 另外，你还可以使用其他el-dialog组件提供的属性来实现滚动条的显示和隐藏，例如： ```html <el-dialog :visible="dialogVisible" :height="dialogHeight" :before-close="beforeClose"> <!-- 弹出框内容 --> </el-dialog> ``` 其中，`:height`属性可以设置弹出框的高度，当内容超出该高度时会出现滚动条。`:before-close`属性可以在关闭弹出框前执行一段逻辑，你可以在这里重置弹出框的高度。 希望以上信息能对你有所帮助！如有其他疑问，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值