Заголовок по центру и внизу фона

Question

Я новичок в React. Можете ли вы объяснить, как разместить .herogroup (состоящую из h1, p и кнопки) в середине и на 20 пикселей дальше от нижней части фона (принадлежащий .Hero)?

<div>
 <div className="Hero">
   <div className="HeroGroup">
    <h1>ABC</h1>
    <p>ABC</p>
    <Link to="ABC">ABC</Link>
   </div>
 </div>

CSS

.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;}

.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 150px 50px;
text-align: center;}

Answer 1

Я использовал css flex. Что удобнее для вашего случая, чем использование абсолютной позиции.

.Hero {
    height: 1920px;
    background-image: url('../images/abc.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.HeroGroup{
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 0px;
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div>
 <div class="Hero">
   <div class="HeroGroup">
    <h1>ABC</h1>
    <p>ABC</p>
    <Link to="ABC">ABC</Link>
   </div>
 </div>

Answer 2

В вашем классе .HeroGroup сделайте это

.HeroGroup {
  max-width: 500px;
  padding: 150px 50px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  bottom: -20px;
}