html - Z-index 绝对定位混淆

Question

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

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-index 与绝对定位相结合应该有效——但显然无效。

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

谢谢!

Answer 1

你可以添加

position:relative； z-index:1;

到你的article 和 article:hover higher

z-index:2;

或 10;

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

附言而且据我所知，javascript 部分不需要。