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>

始终将绝对定位的元素置于响应式元素下方

1 个答案: