html - HTML 页面中的浮动元素

Question

我在 html 页面的正文中有这个 div 元素：

<div id="alerts">
{% block alerts %}
  {% try %}
    {% if alerts is not None %}
      {% for alert in alerts %} 
        <div class="{{alert.get('level', 'alert') }}">
          {{ alert.get('content') }}
        </div>
      {% end %}
    {% end %}
  {% except NameError %}
  {% end %}
{% end %}   
</div>

在某些情况下显示警报或错误。

但是当我向下滚动页面时，这是不可见的。如何在页面顶部显示与页面本身滚动相关的此元素？

CSS是这样的：

#alerts { 
display:none; 
top: 0;
left: 0;
width: 100%;
position: absolute;
z-index: 0;
}

Answer 1

尝试position:fixed而不是absolute这里的更多关于定位的信息以防万一：https ://developer.mozilla.org/en-US/docs/CSS/position