Z-index绝对定位混乱

Question

在下面的例子中，我试图弹出＆＃34;门票＆＃34;在其他门前展示：

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

我试图在文章徘徊时对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指数与绝对定位相结合应该有效 - 但显然不行。

热衷于避免使用JS，但如果需要，也会这样做。

谢谢！

Answer 1

您可以添加

position:relative; z-index:1;

到article和article:hover更高

z-index:2;

或10;

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

P.S。而且我不能在javascript部分中理解。