Как переместить заголовок в нижнюю часть изображения

Question

Я знаю, что это не так быстро, но я новичок в css и не могу решить эти вопросы в течение 2 недель ...

Я не могу переместить .headline-box вниз изображения. Я пытался изменить свой дисплей и поиграть с ним, заблокировать, согнуть, сетки и изменить его на выравнивание / выравнивание строки / столбца, но ничего. Я хотел поменять положение на bottom: 0 присед ...

Может кто нибудь подскажет как это исправить? А вам это решение?

Почему ничего, что я сделал, не сработало?

И почему, когда я дал положение: относительно этого класса, оно пошло за изображением, Вниз сторона ..?

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

Я публикую ссылку, но этот URL:

Codepen

Спасибо всем:)

Answer 1

Я переместил ваш .headline-box на дно, как вы хотели.Проблема была вызвана несколькими причинами, наиболее важной из которых было то, что у вашего жатки / контейнера-жидкости / ряда не было высоты, и поскольку у вашего тела тоже не было высоты, выполнение этого в любом случае не дало бы результата.

Я сделал следующие вещи:

• body & html теперь имеет высоту 100% (всегда делайте это!)
• header такжеимеет высоту 100%.
• удалил изображение из вашего html и применил его как background-image к заголовку.
• ваш .headline-box теперь имеет bottom: 0, который теперьставит его внизу.
• Я значительно очистил ваш код и пропустил следующие ненужные элементы:
  • дополнительные <section> только для одного h3.
  • <div id="main img-div"> не было конечного тега.
  • также не требовалось, потому что вы уже аккуратно поместили свой контент в header и section (s).

Вот обновленный Codepen .

Если у вас есть какие-либо дополнительные вопросы, пожалуйста,эт я знаю :) 1047 *