解决echarts插件覆盖其他控件

很多情况下,我们会使用到echarts插件。相信大家既然查询这个词条那么就应该适合我出现了一样的问题。

首先描述一下我的问题:

我的页面上面有一个横向的菜单栏,其中有某些菜单的子菜单的项目比较多,也就是说所占的高度较高,而我下面有一个区域需要用echarts插件表示某些图形。当使用echarts插件显示出图形之后,当我想点击菜单下面的较多的子菜单的时候发现,echarts插件的线条出现在那一列子菜单上面,同时当我想点击那列子菜单的时候,发现当鼠标到达echarts区域时,我的子菜单无效,相当于是echarts所产生的图形覆盖在我的子菜单上,所以子菜单点击无效。

解决方法:

在横向菜单的整体出添加一个

进行包裹起来,同时div里面添加一个style="position:relative;z-index:99"

总的来说就是

<div style="position:relative;z-index:99;">
##############菜单的内容

说明一下:我之前查到这个问题的解决应该时需要添加z-index属性的,但是因为z-index属性仅能在定位元素上奏效,所以需要提前注明定位元素,即就是position,当然我首先觉得应该position的值应该时absolute,但是我测试了一下和我原来的不一样,我又测试了一下relative可以实现我的目标。当然或许这个relative只适合我的这种情况,但是大体的解决思路就是这个,而position的具体的值,大家可以根据自己的情况测试。



你可能感兴趣的:(javaweb项目问题解决)