Тег р не перекрываются с изображением

index.html

{% extends 'main/base.html' %}
{% load static %}
{% block title %}
{{title}}
{% endblock %}
{% block content %}
<link rel = 'stylesheet' href="{% static "main/css/index.css" %}">
<body>
  <div class="grid-wrapper">
    <header class="grid-header">
        <img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
        <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
    </header>
  </div>
</body>
{% endblock %}

index.css

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
}

Если теги в index.css работают правильно. Когда я создал другой файл с тем же кодом (но без Django), все заработало. Я пытался писать .grid-header p и header p и .grid-wrapper p, но ничего не помогло. С помощью <p> я попытался поместить текст на картинку

Надо присвоить top:0; на теге P или любое значение, которое вы хотите.

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}
    <header class="grid-header">
        <img class="circles" src="https://static.vecteezy.com/system/resources/thumbnails/001/984/880/small/abstract-colorful-geometric-overlapping-background-and-texture-free-vector.jpg" alt="main pic">
        <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
    </header>

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