CSS 如何使用css使div始终位于顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2137297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div always top using css?
提问by cssnewbie
Like alert bar of stackoverflow here.
就像这里的stackoverflow警报栏。
It should not be position:fixed,because it's not supported by all browsers.
它不应该是position:fixed，因为并非所有浏览器都支持它。
Absolutely,neither will position:absolutedo.
绝对，两者都position:absolute不会。
回答by Patrick Niedzielski
You could always use EMCAscript or one of its forms (JScript, JavaScript) to calculate the position of the viewport and set the position equal to that.
您始终可以使用 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";
}
Then just pass in the DIV object you want to use, with document.getElementById.
然后只需传入您要使用的 DIV 对象，并带有document.getElementById.
I'd use position: fixed;. Many people still use IE6, though, which does not support it.
我会用position: fixed;. 但是，许多人仍然使用 IE6，但不支持它。
回答by Rishabh
Its very simple step if you are using any class in css apply one more property z-index = 1;it will make that div to always on top, if that div is relative to its parent div.
如果您在 css 中使用任何类，那么它非常简单的步骤再应用一个属性z-index = 1; 如果该 div 与其父 div 相关，它将使该 div 始终位于顶部。
回答by Itay Moav -Malimovka
Put the div under the body tag, give it position absolute, top:0, left:0 And if you want it to push the content, just put it there without the CSS I gave you.
把 div 放在 body 标签下，给它绝对位置，top:0，left:0 如果你想让它推送内容，就把它放在那里，而不用我给你的 CSS。
回答by Paul Knopf
Make sure the element is directly nested under the body tag, use css with absolute position and top:0;
确保元素直接嵌套在body标签下，使用具有绝对位置和top:0的css；
By the way, fixed is used by a large majority of the browsers.
顺便说一下，大多数浏览器都使用fixed。
回答by Tor Valamo
Only fixed positioning does this, unless you want to use javascript. Which you don't, because it's an ugly way of doing it.
除非您想使用 javascript，否则只有固定定位才能做到这一点。你不这样做，因为这是一种丑陋的做法。
回答by Joel Etherton
Just do it like SO does it. Use the "notifycontainer" and populate it with InnerHTML from JavaScript when you need to. Since it's a relative positioning, when you rewrite the InnerHTML the page rerenders based on the contents of the div as they are at that moment. Same deal when you want to clear the alert, you just rewrite the InnerHTML. You don't even need to write animation code. The way browsers render now, the animation will be automagical.
就像这样做一样。使用“notifycontainer”并在需要时使用 JavaScript 中的 InnerHTML 填充它。由于它是一个相对定位，当您重写 InnerHTML 时，页面会根据 div 的内容重新呈现，因为它们当时的状态。当你想清除警报时，同样的处理，你只需重写 InnerHTML。您甚至不需要编写动画代码。浏览器现在呈现的方式，动画将是自动的。
