我们经常用z-index来控制dom的显示顺序(注:z-index必须在position:absolute的dom上生效)。但是有一种情况,无论怎么调整z-index,也无法使其浮到最高层。如下图:
黄色box的zIndex是1,橙色box的zIndex是2。那么作为黄色box的子dom的绿色部分,即便zIndex设置为9999,也还是会被橙色box遮挡住。
现实例子(悬浮框被右侧部分遮挡):
想让绿色圆圈不被遮挡,可以有以下解决思路:
思路一:调整布局,使黄色box悬浮在橙色box上方,如设置黄色box的zIndex为3。
思路二:把绿色圆圈从黄色box中解放出来,不要作为黄色box的子dom。那么其zIndex就可以不被局限在黄box上。
具体到上面的实例,我采用了第三种解决方法:靠近右侧的悬浮框,悬浮在左侧;靠近左侧的悬浮框,悬浮在右侧。也就是让悬浮框居中悬浮,不跟左右侧接触。