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

如果没有将CSS规则应用于#message，则很难正确回答这个问题。话虽这么说，我假设您要创建一个类似于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%;
}

IE中垂直定位（堆叠）元素不正确

1 个答案: