Put your image inside a container div and make your example be positioned absolute to that div, not the griditem div. Also, DO NOT use multiple elements with the same ID. Here is an example where I made the first item be like you want it to be and your second one is how you originally had it so you can see the difference.
.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>