Html 始终将绝对定位的元件置于响应元件下方

好的，我要做的是在一个响应图像下放置一个绝对定位的元素。问题在于，每当屏幕大小改变时，图像的大小就会改变，并且绝对定位的元素不会停留在其下方

这是我一直在使用的一支代码笔，它有助于说明这个问题：

为了避免堆栈溢出，以下是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>

现在，图像和“立即下载”片段必须保存在同一个链接标签中。为什么不把它们分开，在它们之间加上“了解更多”按钮呢？好吧，这不是我的选择，因为我一直在坚持，所以，这就是我的选择

我希望“了解更多”按钮始终位于图像下方，无论图像大小如何。我一直在尝试不同的东西，但无法让它保持在图像以下。我不能把它放在包含图片和“立即下载”按钮的链接中，因为“了解更多”按钮必须有自己的链接

---

有什么想法吗？

使用flexbox并更改元素的顺序，您可以摆脱绝对位置。然后，您可以播放负边距，使按钮位于图像下方：

.item{
边框：1px纯黑；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
文本对齐：居中；
保证金：0自动；
最大宽度：100%；
}
.btn容器{
顺序：2；
最高保证金：-7.5雷姆；
}
.项目a{
文字装饰：无；
}
.项目img{
宽度：100%；
最大宽度：100%；
}
.cta，
.了解更多{
字体大小：36px；
宽度：280px；
边缘底部：20px；
}
.了解更多{
背景：森林绿；
颜色：黑色；
宽度：280px；
保证金：0自动；
最大宽度：100%；
边框：1px纯黑；
填充：15px；
}
.了解更多信息：悬停{
背景：暗绿色；
颜色：白色；
}
.cta{
边框：1px实心橙色；
背景：橙色；
颜色：白色；
保证金：4rem自动0；
填充：10px；
}
.cta:悬停{
颜色：黑色；
背景：棕色；
}

Absolute positioning（绝对定位）意味着您知道要将元素相对于父元素放置在何处，因此除非您知道图像的高度，否则无法使用此功能。如果可以的话，你可以通过JS来找到答案。另一方面，你能修改多少HTML的结构？@VictoriaRuiz我不能改变图像和“立即下载”必须在an href标签内的事实。就是这样。元素的放置顺序是如此错误，这解释了为什么会出现问题。考虑使用背景图像代替，不能使用图像作为背景。事情就是这样。元素的设置方式不是我的决定，我尝试将其更改为更合理的方式，但有人告诉我，这就是它所需要的。这很好，但在IE 11的小屏幕中不起作用，而且那里的东西也需要看起来很好。

.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;
}