Chrome VUE position:absolute，z-index:3000 容器被设置元素position:fixed,z-index:200 的元素盖住了，

最新推荐文章于 2023-12-04 18:57:51 发布
最新推荐文章于 2023-12-04 18:57:51 发布
阅读量174 收藏
点赞数
分类专栏： vue css 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44146522/article/details/132581421
版权
vue 同时被 2 个专栏收录
34 篇文章 0 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏

标签按钮后菜单  设置 position:absolute，z-index:3000

项目选择框  设置 position:fixed，z-index:20

表格表头  设置 position:sticky，z-index:20

遇到的问题：

右击标签按钮后，弹出的菜单被项目选择框和表格表头遮挡，按道理来说设置z-index要小的多。

分析原因：

参考链接：https://www.cnblogs.com/vinityNxr-2015/p/4933112.html

解决方法：

position:fixed，z-index:0

position:sticky，z-index:0

我家媳妇儿萌哒哒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fixed-columns
06-02
"fixed-columns表格固定列"这一技术主要应用于JavaScript库，如jQuery或现代的前端框架如React、Vue和Angular。这些库提供了丰富的API和方法来实现这一功能。例如，在Bootstrap的插件中，我们可以找到用于实现固定列...
I-am-making-website-with-HTML-CSS:我正在使用 HTML CSS 制作网站
08-04
- `position`属性（`static`, `relative`, `absolute`, `fixed`）用于控制元素的定位，配合`top`, `right`, `bottom`, `left`调整位置。 - `box-sizing`属性可以帮助调整盒模型的行为，使元素的总大小包含边框和内...
vue，组件库按需加载
qq_26506551的博客
10-25 235
1、npm install babel-plugin-component -D 2、 Element-ui: import { Button } from ‘element-ui’; const element = { install: function (Vue) { const Elements = [ Button ] Elements.forEach(key => { Vue.use(key, { size: ‘small’, zIndex: 3000 }) }) Vue.prototype.
element-ui 传入一个全局配置对象 对按钮组件全局设置size大小
未末的博客
04-25 2387
官方文档： 在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下： 完整引入 Element： import Vue from 'vue'; import Element from 'element-ui'; Vue.use(Element, { size: 'small', zIndex: 3000 });
div层调整zindex属性无效原因分析及解决方法
wenqingzzz的专栏
07-31 1111
在做的过程中，发现了一个很简单却又很多人应该碰到的问题，设置Z-INDEX属性无效。在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 1.第一种情况（z-index无论设置多高都不起作用情况）： 这种情况发生的条件有三个： 1、父标签 posit
CSS中使用position: fixed固定定位时遮挡下方内容
最新发布
CssHero的博客
12-04 2495
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
CSS关于position布局覆盖及解决方案
qq_40825315的博客
03-14 1万+
先来介绍一下pastion的定位方式 1.两个div都没定位 <div style="width: 300px;height: 300px;background-color: yellow;"> 第一层 </div> <div style="width: 300px;height: 300px; background-color: blue;"> 第二层...
summary:知识点总结
04-12
6. 定位(position)：static、relative、absolute、fixed，理解定位模式对于复杂的页面布局很有帮助。 7. Flexbox（弹性盒子布局）：提供了一种更为灵活的布局方式，适用于一维布局。 8. Grid（网格布局）：用于二维...
238道整理的高频前端面试题
09-02
- 元素水平居中可以通过设置`margin: auto`实现，而垂直居中则复杂得多，可以使用Flexbox的`align-items: center`，或者Grid布局的`align-items: center`，或者CSS calc和position相结合的方法。 5. **Vue.js** -...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
2. **CSS调整**：可以尝试将输入框设置为`position:fixed`，并且在键盘弹出时动态调整其位置，使其始终保持在可视区域内。同时，可以通过监听`resize`事件来捕获软键盘弹出和隐藏的状态。 3. **JavaScript适配**：...
CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）
热门推荐
我不是水哥
12-10 2万+
在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工...
html css 垂直居中 position定位 和 浏览器缩放部分问题的解决方案
小菜鸡程序媛的挣扎史
07-18 2793
1、align的使用问题 <embed></embed>使用align="center"并不能使之居中 只能在外面套一层div 并加上属性style="text-align: center;"来使之居中 2、position:absolute的使用的问题 由于float的频繁使用会导致很多的浏览器的问题，所以一般情况下都不使用float，定位使用positio...
CSS常见问题及解决（五） position定位中的absolute
baizaozao的博客
03-21 2420
参考资料：https://www.jianshu.com/p/a3da5e27d22b 两个结论 absolute不一定要与relative同时出现 当没有设置父元素或者某个祖先元素为relative时，absolute的 left，right，top，bottom属性是相对于body而言的 当设置父元素或者爷爷元素，为relative时，absolute的 left，right，...
固定在顶部加position:absolute不起作用
飞翔的熊blabla
07-06 3123
那是因为没加top:0,没加top:0的情况,上面的div会把控件往下挤
解决使用绝对定位absolute后，margin：0 auto居中方法失效
qq_40678503的博客
09-20 1万+
我们都知道，当给一个块级元素设置宽度后，使用margin:0 atuo可以实现水平上的居中。 margin:0 auto的理解是，上下边距为0，左右边距为auto（auto是自动调整大小） 在浏览器中div如果没有设置宽度，那么宽度自动为浏览器的宽度，这是给div设置宽度后，div会靠左显示，margin:0 atuo就是为了填充右侧的空白空间。 但是&lt;img&gt;当不设置宽度时，不会块级...
z-index无效，无论设置多大都被其他的元素覆盖
zhu562002124的博客
09-18 2万+
z-index问题 .test-div{ border:1px blue solid; width:300px; min-height:100px; position:relative; -z-index:0; font-size:18px; font-family:microsoft yahe;
vue中覆盖原样式不生效怎么办？
weixin_52616763的博客
10-25 381
正确示范二：去掉scoped。错误示范：以下修改不生效。正确示范一：使用deep。
elementui全局配置size和z-index属性（我只要size是small）
阿小绿的博客
11-27 8670
图片来源elementui官网：https://element.eleme.cn/#/zh-CN/component/quickstart Vue.use(Element, { size: 'small', zIndex: 3000 }); 我本人经常忘记加size，或者有的地方加了有的地方没加。这个知识点，主要留给自己看的。 ...
vue z-index:
03-28
The z-index property in Vue is used to specify the stacking order of an element. It is used to control the vertical order of elements on a web page. The z-index property is used to define the stacking order of positioned elements. Elements with a higher z-index value will appear on top of elements with a lower z-index value. The default value of z-index is auto, which means that the element is placed in the natural stacking order based on its position in the DOM. To use the z-index property in Vue, you can specify it in CSS or inline styles. For example: <template> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> </template> <style> .container { position: relative; } .box1 { position: absolute; z-index: 1; } .box2 { position: absolute; z-index: 2; } </style> In this example, the .box2 element will appear on top of the .box1 element because it has a higher z-index value.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值