为什么这个div元素忽略了我的z-index和width设置？

Question

我尝试使用HTML + CSS生成简单的内联信息弹出窗口，但我无法按预期工作。特别是，popup div容器忽略我的 max-width 和 z-index 设置。

我发布了a small demonstration on jsfiddle。

有人可以赐教吗？我错过了什么？非常感谢提前！

Answer 1

您需要将头寸设置为绝对/相对/固定，以使z-index工作http://jsfiddle.net/NMh8j/12/

Answer 2

如果您将.faq>.body更改为position:fixed，则会观察到240px宽度，而top : 12px正在将弹出窗口移到底层？上。然后，您可以放弃left-20px以及它自身居中。

jsFiddle update

Answer 3

您的.head未指定任何职位，请将您的CSS更改为：

.faq:hover>.head { 
   position: relative;
   border-color:#cccccc; 
   border-bottom-color:#ff0000; 
   z-index:100;
}

z-index需要修复position属性（fixed，absolute，relative ..但不 {{ 1}}，这是默认值）