Как закрепить кнопку за фотографией в css?

Question

В общем, я не совсем понимаю, как это можно сделать. Здесь получается можно просто пойти через два контейнера или как?
Вот в качестве примера:

.Central {
  width: 770px;
  height: 800px;
  margin-left: -150px;
}

.container {
  position: relative;
  width: 50%;
}

.container img {
  width: 50%;
  height: auto;
}

.container .next {
  position: absolute;
  background-color: white;
  color: #000;
  right: 69%;
}

<div class="shapka">
  <div class="container">
    <div class="text-container">
      <p class="Head">PROJECT</p>
      <p class="Head_bootom">Lorum</p>
    </div>
    <div class="imbt_container">
      <img class="Central" src="https://i.imgur.com/Yz3ggVu.jpeg" alt="main">
      <button class="next">VIEW PROJECT →</button>
    </div>
  </div>

Answer 1

В целом у вас уже всё есть, за исключением некоторых познаний:

position: absolute будет "абсолютным" относительно ближайшего родителя с position не равным static.

Проще говоря, вашему .imbt_container нужен position, в данном случае relative.

body {background-color: #f2f2f2;}

.imbt_container {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  position: relative;
}

.imbt_container-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.imbt_container-button {
  border: 0;
  background-color: white;
  color: #000;
  padding: 1em .75em;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div class="imbt_container">
  <img class="imbt_container-img" src="https://i.imgur.com/Yz3ggVu.jpeg" alt="main">
  <button class="imbt_container-button" class="next">VIEW PROJECT →</button>
</div>

БЛОГ НА HUSL

Как закрепить кнопку за фотографией в css?

Ответы (1 шт):