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}}可能会正常工作）：

＆＃13;

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

＆＃13;

如何使通知框浮动在中心

1 个答案: