2

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

我在 jsfiddle 上发布了一个小演示。

有人可以启发我吗？我错过了什么？提前谢谢了！

4

3 回答 3

2

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

于 2012-09-18T12:26:42.077 回答
1

如果您更改.faq>.body为position:fixed，则会观察到 240px 的宽度，并且top : 12px将弹出窗口移动到底层 ? 上。然后，您可以放下left-20px以及它会自行居中。

jsFiddle 更新

于 2012-09-18T12:25:28.570 回答
1

您.head没有指定任何位置，请将您的 CSS 更改为：

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

z-index需要position修复属性（fixed, absolute, relative.. 但不是 static, 这是默认值）

于 2012-09-18T12:26:51.420 回答