Css 在页面顶部添加固定警报_Css

Css 在页面顶部添加固定警报

css

Css 在页面顶部添加固定警报,css,Css,我有一个要求，如果某个特定事件发生，我希望在页面顶部显示警报所以我想向下推页面的内容，并将其添加到顶部。我尝试使用位置：修复它覆盖页面我的标记是这样的 <body> ... some html <div> <div>Sticky alert</div> </div> </body> ... 一些html 粘性警报使用位置粘滞。消息{ 位置：粘性；排名：0；右：0；左：0；填充：10px；背

我有一个要求，如果某个特定事件发生，我希望在页面顶部显示警报

所以我想向下推页面的内容，并将其添加到顶部。我尝试使用位置：修复它覆盖页面

我的标记是这样的

<body>
... some html

<div>
    <div>Sticky alert</div>
</div>

</body>


... 一些html
粘性警报

使用位置粘滞

。消息{
位置：粘性；
排名：0；
右：0；
左：0；
填充：10px；
背景：红色；
}

这里有一条消息
HTML Ipsum呈现
佩伦茨克居民莫比·特里斯蒂克（morbi tristique）塞内特斯（Sentecus et netus）和马莱苏阿达（malesuada）是一位著名的土耳其人。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州奥纳雷·希特·阿梅特市，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州，威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部。乌特·费利斯
标题级别2
Lorem ipsum dolor sit amet，是一位杰出的领导者
毛里斯·尤里索斯的阿利夸
Lorem ipsum dolor sit amet，是一位杰出的献身者。麦格纳万岁。我在felis aliquet congue的家里。这是一个最容易引起胎动的孕妇。马萨库拉比图酒店。多内克·埃利芬德，莫利斯射手座的自由人，泰勒斯和马利苏亚达·泰勒斯，卢克图斯·图皮斯的精英们坐在阿梅特广场。小飞蛾
标题级别3

Lorem ipsum dolor sit amet，是一位杰出的领导者
毛里斯·尤里索斯的阿利夸

为什么不使用Javascript和/或jQuery？我可以使用jQuery附加到body top节点，但如果可能，我想使用css，因为在我所在的页面上，它是一个AngularJS应用程序，我希望能够使用该页面上的AngularJS功能如果你想使用AngularJS功能，为什么不使用类似于

ngIf

，因此，当条件为

true

时，您会在页面顶部显示一个块：因为在主页面上没有添加常规模块。Angular模块添加在一个单独的页面上如果您希望它自己向下推内容，那么您希望将其插入DOM中另一个主体内容之前，而不是将其定位为绝对或固定，因为这两个模块都会使其脱离正常的布局流。如果你不能做到这一点，并且需要定位元素，那么你也必须让其余的内容自己向下移动，例如通过在主体上应用匹配的填充顶部，或者类似的方式。我添加了一个固定高度栏的解决方案。如果需要更具动态性的内容，可以随时使用JS设置值。