twitter-bootstrap 如何始终在顶部显示 boostrap/angularUI 警报？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24985634/
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 do display a boostrap/angularUI alert always on top?
提问by hey
I'm displaying some alerts using angular-UIwhich is basically powered by bootstrap. However the issue is that the alerts can't be seen by the client if they are navigating to the bottom of the page. I would like to know how can I display the alerts always on top ( I think the right term is "on fixed position" )
我正在使用基本上由引导程序提供支持的angular-UI显示一些警报。但是，问题是如果客户端导航到页面底部，则无法看到警报。我想知道如何始终在顶部显示警报（我认为正确的术语是“在固定位置”）
回答by Jason Goemaat
How exactly do you want it to work? It might be easiest to use a library like PNotifyor AngularJS-Toaster(plnkr).
您到底希望它如何工作？使用像PNotify或AngularJS-Toaster ( plnkr)这样的库可能是最简单的。
If you want to do it yourself, you could put them in a special area. For something like this you can put the alerts in a div that is position:fixed(plnkr):
如果你想自己做，你可以把它们放在一个特殊的区域。对于这样的事情，您可以将警报放在position:fixed( plnkr)的 div 中：
<div style="position: fixed; top: 0; right: 0">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
{{alert.msg}}
</alert>
</div>
回答by Evgeny Rivkin
well, you should add or override alert styles with position:fixedif you want to "pin" it to the screen..
with additional properties leftand topfor positioning relative to viewport.
好吧，position:fixed如果您想将其“固定”到屏幕上，您应该添加或覆盖警报样式......具有附加属性left和top相对于视口的定位。
回答by DrewT
There are various css position properties that will help you.
有各种 css 位置属性可以帮助您。
.class_of_your_alerts {
position: absolute; /* position: absolute rather than position: fixed
because you will be declaring left, right, top, etc. */
left: 0;
right: 0;
top: 0;
bottom: 0; /* now it covers the whole browser window because all absolute
positioning properties are set to 0. Tweak to your liking
using px or percentage */
z-index: 105; /* optional - if your application has a lot of layers that are
already absolutely positioned, you may wish to up the z-index
which is essentially the element stacking order for the current
dom node */
}
