z-index的使用限制

我们经常用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上。

具体到上面的实例，我采用了第三种解决方法：靠近右侧的悬浮框，悬浮在左侧；靠近左侧的悬浮框，悬浮在右侧。也就是让悬浮框居中悬浮，不跟左右侧接触。