Всегда держите элемент с абсолютным положением под отзывчивым

Question

Итак, что я пытаюсь сделать, это поместить элемент с абсолютным позиционированием под отзывчивым изображением. Проблема заключается в том, что всякий раз, когда изменяется размер экрана, изображение меняет размер, и элемент с абсолютным позиционированием не остается под ним.

Вот кодовое перо, над которым я работал, и помогает проиллюстрировать проблему: https://codepen.io/gojiHime/pen/MXXGbK?editors=1100

И для переполнения стека, вот CSS и HTML:

<div class="item">
  <div class="btn-container">
    <a href="https://www.rottentomatoes.com/" target="_blank" class="learn-more">Learn More</a>
  </div>
  <a href="https://www.doomworld.com/" class="outer-link" target="_blank" tabindex="0">
      <img src="image.png" alt="">
      <div class="cta">Download Now</div>
  </a>
</div>

CSS:

.item {
  border: 1px solid black;
  width: 1024px;
  display: block;
  height: auto;
  position: relative;
  float: left;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}

.item a {
  text-decoration: none;
}
.item img {
  width: 100%;
  max-width: 100%;
}

.cta,
.learn-more {
  font-size: 36px;
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.learn-more {
  background: forestgreen;
  color: black;
  position: absolute;
  width: 280px;
  margin: 0 auto;
  max-width: 100%;
  top: 50%;
  border: 1px solid black;
  padding: 15px;
}

.learn-more:hover {
  background: darkgreen;
  color: white;
}

.outer-link {
  float: left;
  border: 1px solid red;
  margin: 0 auto;
  width: 1024px;
  max-width: 100%;
}

.cta {
  border: 1px solid orange;
  background: orange;
  color: white;
  margin-top: 8rem;
  padding: 10px;
}
.cta:hover {
  color: black;
  background: brown;
}

Теперь изображение и элементы "Загрузить сейчас" ДОЛЖНЫ храниться в одном теге ссылки. Почему бы просто не сделать их отдельными ссылками и поместить между ними кнопку "Подробнее"? Ну, это был не мой выбор, потому что я застрял с этим, так оно и есть.

Мне бы хотелось, чтобы кнопка "Узнать больше" всегда оставалась под изображением, независимо от его размера. Я пробовал разные вещи, но не могу заставить его оставаться ниже изображения. Я не могу поместить его в ссылку, которая содержит изображение и кнопку "Загрузить сейчас", потому что кнопка "Узнать больше" должна иметь собственную ссылку.

Есть идеи?

Answer 1

Используйте flexbox и измените порядок элементов, и вы сможете избавиться от абсолютной позиции. Затем вы можете играть с отрицательным полем, чтобы сделать кнопку под изображением:

.item {
  border: 1px solid black;
  width: 100%;
  display: flex;
  flex-direction:column;
  position: relative;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
  
}

.btn-container {
  order:2;
  margin-top: -7.5rem;
}

.item a {
  text-decoration: none;
}
.item img {
  width: 100%;
  max-width: 100%;
}

.cta,
.learn-more {
  font-size: 36px;
  width: 280px;
  margin-bottom: 20px;
}
.learn-more {
  background: forestgreen;
  color: black;
  width: 280px;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid black;
  padding: 15px;
}

.learn-more:hover {
  background: darkgreen;
  color: white;
}

.cta {
  border: 1px solid orange;
  background: orange;
  color: white;
  margin: 4rem auto 0;
  padding: 10px;
}
.cta:hover {
  color: black;
  background: brown;
}

<div class="item">
  <div class="btn-container">
    <a href="https://www.rottentomatoes.com/" target="_blank" class="learn-more">Learn More</a>
  </div>
  <a href="https://www.doomworld.com/" class="outer-link" target="_blank" tabindex="0">
  <img src="http://placehold.jp/550x350.png" alt="">
  <div class="cta">Download Now</div>
  </a>
</div>