javascript - IE 中元素的垂直定位(堆叠)不正确

Question

我有这个简单的:

<script type="text/javascript">
$("#message").fadeIn("slow");
</script>

<div id='message' style="display: none;">
    <span>Hey, du har fået +1 points, du har nu <u>2929</u></span>
    <a href="#" class="close-notify" onclick="closeNotice()">X</a>
</div>

我的网站上有一个设计。当我使用它时，它可以工作并在设计“上方”显示它，但是当我尝试在 IE 中查看时，它会在设计“下方”显示它..

<div> 在哪里重要吗？盒子是？为什么它在 FF 中显示正确但在 IE 中显示不正确？

Answer 1

没有应用于 #message 的 CSS 规则，很难正确回答这个问题。话虽如此，我假设您想创建一个类似于 Stack Overflow 上的通知框。

为了让一个元素位于另一个元素之上，您必须分配一个 z-index到元素。 z-index是仅在定位元素上评估的属性，因此您还必须定位您的 <div> .

以下 CSS 应定位您的 <div>以上所有内容。

#message {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50; /* Anything higher than 1 will do */

  height: 26px;
  width: 100%;
}