Как сделать, так, чтоб текст в отдельном div не уходил под основной текст и фото страницы

Возможно, z-index поможет в вашем случае.

Так как самого хтмл-а и CSS-а вы не предоставили, определить проблему трудно. Я думаю что flex контейнер может сделать ваш layout более структурированным и тем самым устранить нежелаемый эффект.

1. Поставьте у себя div контейнер.

<div class="flex"></div>

2. Поместите в этот контейнер картинку и остальной текст, каждое в свой div контейнер.

<div class="flex">

    <!-- 1-ый дочерной элемент flex контейнера -->
    <div>
        <img src="./image" />
    </div>

    <!-- 2-ой дочерной элемент flex контейнера -->
    <div>
        <h1>Filter by product categories</h1>
        <!-- ... -->
    </div>
</div>

3. Добавьте нужный CSS.

.flex {
    display: flex;

    /* Делает ряды а не колонки */
    flex-direction: column;

    /* Выравнивает элементы вертикально к вершине */
    align-content: flex-start;

    /* Выравнивает элементы горизонтально по центру */
    justify-items: center;
}

Результат:

.flex {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-items: center;
}

.flex > * {
    border: 1px solid #000f;
}

img {
    width: 100%;
}

<div class="flex">
    <div>
        <img src="https://www.cameraegg.org/wp-content/uploads/2016/01/Nikon-D500-Sample-Images-2.jpg" />
    </div>
    <div>
        <h1>Filter by product categories</h1>
    </div>
</div>