HTML页面中的Float元素

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