Z-index绝对定位混乱

Question

在下面的例子中，我试图让弹出的“票”显示在其他门前：

http://codepen.io/anon/pen/EVMXVz

当文章悬停在 div.appeal-details 上时，我试图在 div.appeal-details 上应用更高的 z-index - 我不确定为什么这不起作用：

article:hover .record .jukebox-ticket {
  animation: growTicket 0.4s ease-in-out;
  display: block;
  position: absolute;
  top: 150px;
  margin: 0px auto;
  z-index: 20;
}

我的理解是，较高的 z-index 与绝对定位相结合应该有效 - 但显然不是。

热衷于避免使用 JS，但会在需要时使用。

谢谢！

Answer 1

您可以添加

position:relative; z-index:1;

到您的article和article:hover更高

z-index:2;

或 10 个；

检查示例： http : //codepen.io/anon/pen/zvbdrB

PS，正如我所理解的那样，在 javascript 部分中不需要。