始终将绝对定位元素置于响应元素之下

Question

好的，所以我想要完成的是在响应式图像下方放置一个绝对定位的元素。问题是，每当屏幕尺寸发生变化时，图像都会发生变化，并且绝对定位的元素不会停留在其下方。

这是我一直在研究的代码笔，有助于说明问题：https://codepen.io/gojiHime/pen/MXXGbK?editors=1100

为了 Stack Overflow，这里是 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>