在 Chrome 中绝对定位 div 的子项上忽略 Z-Index

Question

我正在尝试使用嵌套在 table 单元格中的绝对定位，当鼠标悬停在 "pops up" 单元格上时。以下在 Firefox 中运行良好，但由于某些原因在 Google Chrome 中失败。看起来绝对定位的 text 忽略了它的 z-index，并出现 "over" 更高的 z-indexed div.

#c1 {
    background-color: red;
}
#c2 {
    background-color: green;
}
.cell {
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: all .2s ease-in;
}
.cell:hover {
    transform: scale(2);
    z-index: 100;
}
.container {
    position: relative;
    height: 100%;
}
.absolute {
    position: absolute;
    z-index: 0;
}

<div class="cell" id="c1">
    <div class="container">
        <div class="absolute">TEST</div>
    </div>
</div>
<div class="cell" id="c2">
    <div class="container">
        <div class="absolute">TEST2</div>
    </div>
</div>

http://jsfiddle.net/P7c9q/323/

除了避免绝对定位之外，我能做些什么来避免这种情况吗？

Answer 1

jsfiddle update

将 position:relative 添加到您的 .cell class。
这导致 z-index 有效。
此外，最好使用 transform 和 transition 或 -webkit-transform 和 -webkit-transition 来表示 Google Chrome

Answer 2

.cell:hover {
  transform: scale(2);
  z-index: 100;
}

此 z-index 无效，因为 .cell 具有静态位置。将 position:relative 添加到单元格 class.

Answer 3

正如其他人所提到的，这里的答案是将 position: relative; 添加到您的父 .cell 元素。

为什么？因为向父元素添加位置会将所有子元素捕获到新的堆叠上下文。

记住 z-index 值是相对于它们的堆叠上下文的——不一定是根 HTML 文档（尽管它们可以）。 Philip Walton 在他的 post 中更详细地解释了这一点，"What No One Told You About Z-Index". 以下是关键部分：

Here are the basic rules to determine stacking order within a single stacking context (from back to front): 1. The stacking context’s root element

Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Non-positioned elements (ordered by appearance in the HTML)

Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)

Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!

New stacking contexts can be formed on an element in one of three ways:

When an element is the root element of a document (the <html> element)

When an element has a position value other than static and a z-index value other than auto

When an element has an opacity value less than 1

（强调我的）

我已经在下面更新了您的代码段。

#c1 {
    background-color: red;
}
#c2 {
    background-color: green;
}
.cell {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: all .2s ease-in;
}
.cell:hover {
    transform: scale(2);
    z-index: 100;
}
.container {
    position: relative;
    height: 100%;
}
.absolute {
    position: absolute;
    z-index: 0;
}

<div class="cell" id="c1">
    <div class="container">
        <div class="absolute">TEST</div>
    </div>
</div>
<div class="cell" id="c2">
    <div class="container">
        <div class="absolute">TEST2</div>
    </div>
</div>

在 Chrome 中绝对定位 div 的子项上忽略 Z-Index

Z-Index is ignored on child absolute positioned div in Chrome

html

css

google-chrome

z-index