Как расположить элемент снизу, под фото?

Для расположения элемента снизу, под фото, в CSS есть несколько способов. Один из самых простых и популярных - использование свойства position и соответствующих значения для этого свойства.

1. Использование position: relative; для родительского элемента фото:

.photo {
  position: relative;
}

.element {
  position: absolute;
  bottom: 0;
}

В этом случае, родительский элемент фото должен иметь свойство position: relative;, чтобы дочерний элемент с абсолютной позицией position: absolute; мог привязаться к нему. Затем, чтобы элемент располагался внизу, нужно установить bottom: 0;, чтобы элемент находился прижатым к нижней границе родительского элемента.

2. Использование flexbox:

.wrapper {
  display: flex;
  flex-direction: column;
}

.element {
  margin-top: auto;
}

В этом случае, родительский элемент, содержащий фото и элемент, должен иметь свойство display: flex;, чтобы создать flex-контейнер. В дочернем элементе, который должен быть расположен внизу, мы можем использовать margin-top: auto;, что позволит ему занять все свободное пространство сверху и прижаться к нижней границе flex-контейнера.

3. Использование grid:

.container {
  display: grid;
  grid-template-rows: auto 1fr;
}

.photo {
  grid-row: 1;
}

.element {
  grid-row: 2;
}

В этом случае, родительский элемент должен быть flex-контейнером с использованием display: grid;. Затем мы определяем grid-template-rows: auto 1fr;, чтобы создать две строки, первая строка будет резервировать место для фото, а вторая строка будет растягиваться и занимать все оставшееся пространство. Затем мы используем grid-row для определения, на какой строке должен находиться конкретный элемент.

Это некоторые из способов расположения элемента снизу, под фото в CSS. Выбор конкретного подхода зависит от ваших предпочтений и требований макета.