select被覆盖的问题

一、问题描述

如下图所示，select下拉栏被下方的文本框遮挡住了，怎么调都调不出来。

二、问题分析

下方的文本框是wangEditor，而wangEditor设置的层级z-index很高，会覆盖掉和他重合的区域。

三、解决方法

在wangEditor的css中添加如下代码：

z-index: 2 !important;

这段代码的效果就是将wangEditor设置的层级z-index降低。

z-index的等级的效果是数字越大，层级越高，越在上方。

下方为简单的解释：

//在最上方
z-index: 9999 !important;
//在最下方
z-index: -1 !important;

！！！注意！！！如果使用vue，则不要写在scoped内，否则无效！！！

四、解决后的效果

在网页中利用“检查元素”可以看到添加到的代码。（F12或者Fn+F12）

最终得到的效果如图所示：