时间戳

首页 > 解决方案 > 如何使通知框浮动在中心

css - 如何使通知框浮动在中心

问题描述

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

标签： css

解决方案

只需将通知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>

推荐阅读