在表格单元格内时出现 CSS z-index 问题

Posted 2023-03-06

【中文标题】在表格单元格内时出现 CSS z-index 问题

【英文标题】：CSS z-index issue when inside of table cell

【发布时间】：2012-05-10 05:34:21

【问题描述】：

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

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

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

【问题讨论】：

这里现在没有 ie 但你尝试过 display: inline 吗？

既然弄乱 z-index 会变得很混乱，最好的解决方案是将所有弹出窗口放在表格之外和之后。这将解决您的分层问题。

给我们你的代码人！ Arr ze C0dez 在哪里！

【参考方案1】：

不需要.wrapper div 中td 元素内的所有单独的z-indexes（我相信它们都可以设置为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 中运行。

【讨论】：

虽然相对位置在td 上不起作用，但这一半有效，所以我在每个单元格内添加了一个.wrapper div。然后td:hover .wrapper

【参考方案2】：

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

【参考方案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>

我猜是这样的

【讨论】：

解决这个问题的好主意，虽然这也没有任何区别

【参考方案4】：

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

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

【讨论】：

虽然没有效果，但我在 smarty 中实现了这一点

通过增加 z-index 得到与 @JustinY 相同的答案

现在查看演示，我已经在 smarty 而不是 jquery 中添加了这个

我在笔记本电脑上查看了它在 IE7 和 IE8 中运行的演示。你修好了吗？

【参考方案5】：

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

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

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

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

【讨论】：

遗憾的是，使用您增加 z-index 的方法，这永远不会在像日历这样的表格网格中工作，因为您总是在之前/之后/上方/下方有一个单元格

@JohnMagnolia 我建议将弹出窗口放在桌子外面。

【参考方案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，这将解决您的问题。

【参考方案7】：

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