Как сохранить div x справа от img, который в настоящее время накладывается на абсолютную позицию?

Question

Я пытаюсь создать это (черный представляет div в моем текущем коде):

В настоящее время div не согласован в своем расположении Как я хотел бы, чтобы это было (я хотел бы, чтобы это было постоянно в одном и том же месте, как на картинке выше).

Как сделать так, чтобы div остался в том же месте, как на картинке?

Вот что у меня сейчас есть:

.content {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
  height: 100%;
  padding: 5px;
  margin-top: 95px;
  /* 25 */
  margin-right: 25px;
  margin-left: 215px;
  margin-bottom: 170px;

  text-align: center;
}

#example {
   position: absolute;
   top: 10px;
   left: 130px;

   padding: 5px;
   background-color: white;
   border: 2px solid red;
   color: darkgreen;
}

.grid-item:active {
  box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}

.grid-item:hover {

background-color: #262626;
}

.grid-item {
  position: relative;

padding: 0px;

  border-radius: 10px;

  transition: 0.2s background-color;
}

.thumbnail {
  /* background-color: black; */
  /* object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover; */

  margin-right: 5px;
  /* width: 95%; */
  width: 430px;
  height: 240px;
  /* height: 70%; */
  border-radius: 11px;
  border: 1px solid #282828;
  cursor: pointer;
  object-fit: cover;
}
/* object-fit: cover; */

.details {
  display: inline-flex;
  /* text-align: center; */
  /* display:block; */
  /* display:table-cell;
  vertical-align:middle; */

  /* background-color: grey; */
  margin-right: 5px;
  /* width: 95%; */
  width: 430px;
  height: 75px;
  cursor: pointer;
}
.portalTitle {
  margin-top: 25px;
  margin-left: 10px;
  /* margin: auto; */
  /* line-height: 70px; */
  font: Arial;
  font-family: sans-serif;
  font-size: 16px;
  font-weight:500;
}
.profileImg {
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 25px;
  margin-top: 10px;
  object-fit: cover;
}

    <div class="content">
      <div class="grid-item">
        <img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731">
        <div id="example">This is my div</div>
        <div class="details">
          <img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731">
          <span class="portalTitle"> Shanghai, China night sounds</span>
        </div>
      </div>
      <div class="grid-item">
        <img class="thumbnail" src="images/testImg.png">
        <div id="example">This is my div</div>
        <div class="details">
          <img class="profileImg" src="images/testImg.png">
          <span class="portalTitle"> Shanghai, China night sounds</span>
        </div>
      </div>
    </div>

Answer 1

Поместите ваше изображение внутри контейнера div и сделайте ваш пример абсолютно абсолютным, чем div, а не griditem. Кроме того, НЕ используйте несколько элементов с одинаковым идентификатором. Вот пример, где я сделал первый элемент таким, каким вы хотите его видеть, а второй - таким, каким он был у вас изначально, чтобы вы могли увидеть разницу.

.content {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
  height: 100%;
  padding: 5px;
  margin-top: 95px;
  /* 25 */
  margin-right: 25px;
  margin-left: 215px;
  margin-bottom: 170px;
  text-align: center;
}

.example {
   position: absolute;
   top: 10px;
   left: 130px;
   padding: 5px;
   background-color: white;
   border: 2px solid red;
   color: darkgreen;
}

.grid-item:active {
  box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}

.grid-item:hover {
  background-color: #262626;
}

.grid-item {
  position: relative;
  padding: 0px;
  border-radius: 10px;
  transition: 0.2s background-color;
}

.thumbnail {
  /* background-color: black; */
  /* object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover; */
  margin-right: 5px;
  /* width: 95%; */
  width: 430px;
  height: 240px;
  /* height: 70%; */
  border-radius: 11px;
  border: 1px solid #282828;
  cursor: pointer;
  object-fit: cover;
}
/* object-fit: cover; */

.details {
  display: inline-flex;
  /* text-align: center; */
  /* display:block; */
  /* display:table-cell;
  vertical-align:middle; */
  /* background-color: grey; */
  margin-right: 5px;
  /* width: 95%; */
  width: 430px;
  height: 75px;
  cursor: pointer;
}
.portalTitle {
  margin-top: 25px;
  margin-left: 10px;
  /* margin: auto; */
  /* line-height: 70px; */
  font: Arial;
  font-family: sans-serif;
  font-size: 16px;
  font-weight:500;
}
.profileImg {
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 25px;
  margin-top: 10px;
  object-fit: cover;
}

.imgcontainer {
  display: inline-block;
  position: relative;
}

<div class="content">
  <div class="grid-item">
    <div class="imgcontainer">
      <img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731" />
      <div class="example">This is my div</div>
    </div>
    <div class="details">
      <img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731" />
      <span class="portalTitle"> Shanghai, China night sounds</span>
    </div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="images/testImg.png" />
    <div class="example">This is my div</div>
    <div class="details">
      <img class="profileImg" src="images/testImg.png" />
      <span class="portalTitle"> Shanghai, China night sounds</span>
    </div>
  </div>
</div>