如何使通知框在中心浮动
如何使通知框在中心浮动
提问于 2018-06-05 07:10:07
使用Bulma css框架，我尝试在页面的中心弹出通知框，而不会中断现有的数据(这是一个弹出3秒的通知，然后就会消失)。例如:两个图像叠加在一起(Snippet 1)，我希望通知框浮动在它们的顶部，而不推送任何内容(Snippet 2)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
<div class="notification is-primary">
<button class="delete"></button> Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2022-01-21 03:52:13
我创建了CSS规则，如下所示：
.top-of-the-world{
position: absolute !important;
z-index: 100 !important;
}这样我就不会改变布尔玛的规则。
然后，我在通知中添加了top-of-world类
.notification.top-of-the-world页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50689951
复制相关文章
相似问题