Баннер не отображается вверху, а css не работает

В моем проекте Django есть html следующего вида

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index Page</title>
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon.png' %}">
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>

<div id="error-banner" class="error-banner" style="display: none;"></div>

<header>
    <div class="header-content">
        <!--some header contents-->
    </div>
</header>
<div>
      <!--some other divs-->
</div>

<script>
    function showErrorBanner(message) {
        var banner = document.getElementById('error-banner');
        banner.textContent = message;
        banner.style.display = 'block';

        setTimeout(function() {
            banner.style.display = 'none';
        }, 10000); // 10 seconds
    }
        
    {% if error_message %}
    showErrorBanner("{{ error_message }}");
    {% endif %}
</script>
</body>
</html>

Мой вид входа в систему выглядит следующим образом:

def signin_view(request):
    if request.method == 'POST':
        form = AuthenticationForm(request, data=request.POST)
        if form.is_valid():
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password')
            user = authenticate(request, username=username, password=password)
            if user is not None:
                login(request, user)
                return redirect('login')  # Change 'home' to the name of your homepage URL pattern
            else:
                error_message = "Invalid username or password."
        else:
            error_message = "Invalid form submission."
    else:
        form = AuthenticationForm()
        error_message = None
    return render(request, 'login.html', {'login_form': form, 'error_message': error_message})

и весь style.css выглядит следующим образом

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('resources/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

header {
    background-color: rgba(87, 184, 148, 0.8);
    padding: 10px 20px;
    color: white;
    position: absolute;
    top: 0;
    width: 100%;
}

.header-content {
    display: flex;
    justify-content: flex-end;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

nav ul li a:hover {
    text-decoration: underline;
}

.form-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.form-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.form-toggle button {
    background-color: #57B894;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.form-toggle button:hover {
    background-color: #469D7B;
}

.form-content {
    display: none;
}

.form-content.active {
    display: block;
}

form input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

form button {
    background-color: #57B894;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #469D7B;
}

form p {
    margin: 10px 0 0;
}

form a {
    color: #57B894;
    text-decoration: none;
}

form a:hover {
    text-decoration: underline;
}


  .required-field {
        position: relative;
    }

    .required-field input {
        padding-left: 15px; /* Adjust as needed */
    }

    .required-field span {
        position: absolute;
        left: 0;
        top: 0;
        color: red;
        font-size: 20px; /* Adjust size as needed */
        line-height: 1;
    }

    .error-banner {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
}

Проблема в том, что всякий раз, когда есть неправильные учетные данные, он показывает баннер, но не в верхней части, и он исчезает через 10 секунд, как и ожидалось. В настоящее время он показывает это так

enter image description here

Я использую PyCharm Professional. Я удалил кэш, перезапустил PyCharm и свою систему. Пожалуйста, дайте мне знать, что здесь не так.

Эта проблема, скорее всего, связана с правилами CSS при правильном позиционировании баннера ошибок в верхней части страницы. Попробуйте внести следующие изменения в класс '.error-banner'. Надеюсь, это обеспечит фиксацию баннера в верхней части страницы и его полную ширину.

.error-banner {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
margin: 10px 0;
border: 1px solid #f5c6cb;
border-radius: 4px;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

}

Основываясь на том, что вы предоставили, возможно, вам нужно изменить display:flex в теле на display:grid или оставить display:flex и добавить flex-direction:column, хотя, честно говоря, будет лучше не держать .error-banner в качестве прямого дочернего элемента body и включить его в отдельный div вместе с формой.

Вернуться на верх