如何使通知框浮动在中心

Question

使用 Bulma css 框架，我尝试在不中断现有数据的情况下使通知框在页面中心左右弹出(它是一个弹出 3 秒然后应该消失的通知(。例如：2 张图像彼此重叠(片段 1(，我希望通知框漂浮在它们上面而不推送任何内容(片段 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>

Answer 1

只需给通知position: absolute一个高于您希望它位于其上的元素的z-index(1可能会正常工作(：

.notification.is-primary {
position: absolute;
z-index: 1;
}

<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>

Answer 2

我创建了一个CSS规则，如下所示：

.top-of-the-world{
position: absolute !important;
z-index: 100 !important;
}

这样我就不会改变布尔玛的规则。

然后我将世界之巅的班级添加到我的通知中

.notification.top-of-the-world