Абсолютное позиционирование для разделения заголовка и описания

Question

На этой странице:

https://www.joshungerdesign.com/packed

У меня настроена мозаика из 3 изображений. Я хочу, чтобы заголовок был вверху каждого изображения, а описание внизу каждого изображения. Есть ли способ добиться этого, написав css, чтобы одновременно адресовать как высокое изображение, так и более короткое?

Я пробовал следующее:

.Index-gallery-item-content-heading {
   position: absolute;
   bottom: 190px;
}

Это дает желаемый результат для маленьких изображений, но не работает для высоких изображений. Мне бы хотелось, чтобы все изображения выглядели как более короткие изображения с заголовком вверху и описанием внизу.

Answer 1

«Магические числа» не рекомендуются, поэтому старайтесь по возможности избегать использования определенных значений пикселей.Использование ems,% и vw / vh является обязательным условием для адаптивного дизайна.

Но в этом случае вы можете просто использовать top: 0;, чтобы плавать абсолютный элемент в верхней части, и bottom: 0;, чтобы плавать абсолютныйэлемент внизу (конечно, если родитель position:relative;)

.Index-gallery-item-content-heading,
.Index-gallery-item-content-description {
  position: absolute;
}

.Index-gallery-item-content-heading {
  top: 0;
}

.Index-gallery-item-content-description {
  bottom: 0;
}