Teg p不要和图片重叠

Question

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 中的其他 tegs 工作正常。当我用相同的代码（但没有 Django）创建另一个文件时，一切都成功了。我试着写 .grid-header p 和 header p 和 .grid-wrapper p，但没有任何帮助。在<p>的帮助下我试着把文字放在图片上

Answer 1

需要在 P 标签上分配 top:0; 或您想要的任何值。

.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>

Teg p不要和图片重叠

Teg p don't overlap with the picture

html

css

django

grid