9

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

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

在此处输入图像描述

我已经尝试了所有我能想到的让它在 IE 7 + 8 中工作的技巧。

4

7 回答 7

15

不需要所有个人z-indexes在.wrapperdiv 里面的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 中运行。

于 2012-05-07T18:58:14.837 回答
0

尝试在和上设置position: relative和 a 。z-indextabletd

于 2012-04-30T14:23:06.337 回答
0

在绝对定位的悬停元素内，放置一个相对定位的 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>

我猜是这样的

于 2012-04-30T15:09:38.360 回答
0

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

如果这没有帮助，是否给表本身的 z-index 设置为 1 或更低是否重要？

于 2012-05-07T16:06:07.823 回答
0

该问题可能是由 IE 的 z-index 堆叠问题引起的，如相关问题的答案中所述。

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

要绕过之前和之后的单元格分层，您必须使用 Javascript 更改单元格的 z-index。

但是由于弄乱 z-index 变得很混乱，最好的解决方案是将所有弹出窗口放在表格之外和之后。这将解决您的分层问题，而无需疯狂/骇人的 CSS。

于 2012-05-07T16:10:26.417 回答
0

问题是它.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，这将解决您的问题。

于 2012-05-09T01:10:26.353 回答
0

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

于 2016-02-28T12:44:18.443 回答