如何解决Div层被Applet遮住问题

前段时间遇到一个task，内容大致是这样的：

有一个flex做的组件，能够根据配置文件，数据文件和样式文件来动态显示我们的数据。其UI类似一个table，有标题栏和数据栏。且不说这个组件如何难实现。我的任务是要在鼠标移至这个控件的每一个单元格时，弹出一个div层，用来显示与此单元格有关的数据。

要弹出一个div层并不难，因为flex是支持javascript的function调用的，难点有二，一是鼠标定位，我要让弹出的window不偏不移地显示在鼠标正下方，因为是在flex组件上定位不同于在纯HTML中定位，最后的解决办法是：在flex内部计算出每个单元格的左上角的顶点坐标和单元格的高度，因为这个高度只是相对flex组件的，我还需要求出这个flex组件的左上角顶点坐标，然后我才能得出每个单元格左下角定点的坐标，进而确定弹出窗口的位置。二是要求这个弹出窗口有半透明边框，有点模糊却能看到后面的内容。找了个web designer画一个，用的是PNG格式，一开始始终不能用，在fireforks和photoshop里是透明的，但是到网页上却没有了透明效果，最后发现用GIF格式的图片可以，如果用PNG格式的话必须用8位的，而24位和32位都不行。

这两个问题解决了，我以为彻底解放了，试了试效果还挺不错。但是当我点到最后一行的某个单元格时，发现弹出窗口的下半部分被遮住了，十分难看。原因是我们做的这个网站包含了好几个组件，这个flex组件的下面是一个Applet。而我们的div层就这样被Applet无情地遮住了。

我试了div标签的z-index属性，把这个值设的很高很低都不行。然后上网查资料说Applet的层级是最高的，要想不被Applet遮住，有几个办法，一个是用iframe,另一个就是把弹出的窗口也做成flex，我采用了第一个方法，把弹出的窗口做成了一个iframe.确实被Applet遮住的问题解决了，心里暗爽了一把，但是很快又发现透明边框没有了，原来整个弹出窗口被包含进iframe之后，尽管iframe是可以设置成透明效果的，但是一旦这么做，弹出窗口上面的内容就又都没有了，这个方法被实践证明行不通。如果用透明边框包住一个iframe呢，结果透明边框有了，内容也没有丢失，但事最下面一行的最下面部分的透明边框被遮住了一部分。虽然相比前面的方法有显著的改善，但是还是没有达到目的。

最后我们小组讨论了很多方案，有说把弹出窗口用flex 实现的，有说把下面的Applet也换成flex组件，也有人建议把下面的Applet移走。我倒是有一个想法，就是当我检测到向下弹出窗口而位置不足时，我就向上弹出窗口。但是这个窗口的大小事要随着内容的大小而自适应大小的，我很难取到准确的高度和顶点坐标，结果这一想法也被否定了。

最后还是客户妥协，认为只有极少一部分透明边框被遮住是可以接受的。听到这个消息后，我不知道是该高兴呢还是伤心。本来我可以放下这个包袱去做更重要的事情，但是我是一个完美主义者，这点缺憾是我内心深处所不允许的，所以直到现在我还一直关心这件事，希望有类似经验的人看到我的这篇文章之后，能给我指点迷津。就当时抛砖引玉吧。。。。

评论

1 楼 xiangxji 2012-10-09  

你好，遇到了相同的问题，请问大侠目前有没有找到解决方案？