如何使用CSS使div始终置顶？

Question

这里需要像stackoverflow的警告栏一样。

它不应该是position:fixed，因为并非所有浏览器都支持。

当然，position:absolute也不行。

- cssnewbie

---

如果您想让它置于所有其他元素之上，则使用z-index属性并将其设置为大于其他元素。 - Cherian

Answer 1

你可以始终使用EMCAscript或其形式（JScript，JavaScript）来计算视口的位置，并将位置设置为相等。

function positionView()
{
  return (window.pageYOffset) ?
    window.pageYOffset :
    (document.documentElement.scrollTop) ?
      document.documentElement.scrollTop :
      document.body.scrollTop;
}

function setPosition(object)
{
  object.style.top = positionView() + "px";
}

只需使用document.getElementById传入您想要使用的DIV对象即可。

我建议使用position: fixed;。然而，许多人仍在使用不支持该属性的IE6浏览器。

- Patrick Niedzielski

Answer 2

将div放在body标签下面，给它一个绝对定位，top:0，left:0。如果你想让它推动内容，只需将其放在那里，不需要使用我给你的CSS。

- Itay Moav -Malimovka

Answer 3

如果您在CSS中使用任何类，只需应用一个属性z-index = 1;即可非常简单地完成此步骤。它将使该div始终位于顶部，如果该div相对于其父div是相对定位的。

- Rishabh

Answer 4

请确保该元素直接嵌套在body标签下，使用CSS的绝对定位和top:0;

顺便说一句，大多数浏览器都使用fixed。

- Paul Knopf

---

当你滚动滚动条时，absolute 不会一直保持在顶部。 - cssnewbie

fixed 真的是他想要的，但这在例如 IE6 上不起作用（可惜它仍然拥有主要的市场份额）。 - Patrick Niedzielski

Answer 5

只有使用固定定位才能做到这一点，除非你想使用JavaScript。但你不应该这样做，因为这是一种丑陋的方法。

- Tor Valamo

Answer 6

就像 Stack Overflow 一样做。使用“notifycontainer”，并在需要时使用 JavaScript 填充 InnerHTML。由于它是相对定位，当您重写 InnerHTML 时，页面将根据 div 的内容重新呈现为当前状态。当您想要清除警报时，只需重写 InnerHTML 即可。您甚至不需要编写动画代码。现在浏览器的渲染方式，动画将自动完成。

- Joel Etherton