IE9 和 Z-index：元素在悬停时消失在父级后面

Posted 2023-05-08

【中文标题】IE9 和 Z-index：元素在悬停时消失在父级后面

【英文标题】：IE9 and Z-index: element disappearing behind parent on hover

【发布时间】：2013-10-29 10:26:46

【问题描述】：

我有一个奇怪的错误，它只出现在 IE9 中。不在 IE8 或 IE10 中，也不在任何其他浏览器中。

基本上，我已经将一大堆“div”设置为瓷砖，ala Pinterest。我将 CSS 设置为

tile:hover 
  z-index: 1;

这样当我悬停时，任何溢出的元素（如框阴影等）都会出现在非悬停的瓷砖上。

然而，

在 IE9 上，该磁贴内的元素在悬停时消失在背景后面。基本上，磁贴的 z-index 将磁贴的背景移动到其中一些（不是全部）包含的元素之上。如果我这样做就不会发生

tile 
  z-index: 1;

我可以通过给每个元素一个位置来解决这个问题：relative 和 z-index: 1，但这不是一个好的解决方案。为什么会这样？

【问题讨论】：

在 Internet Explorer 中，您需要为父级和子级设置 z-index。您是否尝试过将父级的 z-index 设置为 0 或其他值。

【参考方案1】：

在发布后就想通了。未悬停时，磁贴没有 z-index。所以它会在加载时很好，在悬停时很好，然后在取消悬停时消失。解决办法是给

tile 
  z-index: 0;

.tile:hover 
  z-index: 1;