天外孤鹰

这两天在做一个 html 的菜单，别的都没问题，但是在设置它覆盖其他页面元素的时候浪费了两天时间。这问题在 firefox 下没有问题，估计是 ie 的一个 bug。

描述如下（P, A, B, menu, b 分别为不同的页面元素，其中 menu 是 A 的一个子元素）

如果 A 和 B 都是设置了 position:relative 或者 position:absolute 的（即有定位的），而且 menu 和 b 也是有定位的，那么不管 menu 怎么设置 z-index，都不能盖住 b。现象是里面的字混在一起。

最终发现是定位坐标系的问题。因为这里 A 和 B 都是有定位的，相当于创建了不同的定位坐标系；而 menu 和 b 分别以他们为参照物进行定位，就进入了不同的定位坐标系中。这时候他们的 z-index 有不同的原点，也就无法比较谁在上层，所以只好混在一起。

解决方案：把 A 的定位去掉，让 menu 以 P 为参照物绝对定位，那么 menu 和 b 就是在同一个定位坐标系中了。

看上去很简单……但早先没有发现。