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

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

0 голосов
/ 24 июня 2018

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

Вот кодовое перо, над которым я работал, и помогает проиллюстрировать проблему: 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;
}

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

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

Есть идеи?

1 Ответ

0 голосов
/ 24 июня 2018

Используйте 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>
...