表格单元格内部的CSS z-index问题

Question

我有一个日历/表格，当你在每天悬停时我们有一个小弹出窗口，绝对位于每个单元格下方。

为了完成这项工作，我在每个单元格中添加了<div style="relative" />。在FF中正常工作，但是当你在IE中将鼠标悬停在它上面时，z-index被忽略了。

我已经尝试了所有可以让它在IE 7 + 8中运行的黑客攻击。

Answer 1

z-indexes元素内的.wrapper div上的所有个人td都不需要（我相信它们都可以设置为1），并设置这些属性：

/* add these two to your selector */
#calendar tbody td {
  position: relative;
  z-index: 1;
}

/* create this new selector */
#calendar tbody td:hover {
  z-index: 2;
}

使用firebug和IE的开发人员工具，我觉得它在Firefox和IE7以及8中工作。

Answer 2

尝试在position: relative以及z-index上设置table和td。

Answer 3

在你绝对定位的悬停元素中，放置一个相对定位的div并给它一个类似500的z-index.Ie7将绝对和相对定位元素视为具有单独的z-index堆栈

<div class="hoverContent" style="opacity: 1; display: none;">
    <div style='position:relative;z-index:500;'>
        <a class="btn popme" >Book Now</a>
        <p>content etc</p>
        <label></label>
    </div>
</div>

像我猜的那样

Answer 4

我之前用过这个来帮助我解决类似的问题： http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

如果这样做无效，那么如果你给表本身一个z指数为1或更低的东西呢？

Answer 5

问题可能是由于this answer中描述的IE的z-index堆叠问题引起的。

在您的示例中，我能够通过向表格单元格内的div.wrapper添加z-index来修复z-index问题。

为了解决前后细胞的分层问题，您必须使用Javascript更改单元格的z-index。

但是由于搞乱z-index的问题越来越混乱，最好的解决办法就是将所有弹出窗口放在桌子之外和之后。这将解决您的分层问题，而无需疯狂/破解CSS。

Answer 6

问题是.hoverContent是.wrapper的孩子，你应该移动它以使它位于同一级别：

 <td class="available">
    <div class="wrapper" style="z-index: 0;">
        <span class="date">10</span><strong class="price">£200</strong>
        <a href="/victory_cottage/booking/init/id/1/from/1336611600/nights/7" class="link popme"></a>
    </div>
    <div class="hoverContent">...

将td设置为position:relative，将.hoverContent设置为position:absolute，这样就可以解决您的问题。

Answer 7

如果您的组件本身绝对定位并暂时显示在其他组件上，只需将其添加到顶层（即页面），然后您就不必担心表的z顺序或定位类型。