How can i position a logo image from a list react component?

Question

i would like to find the way to position the logo images like it looks here enter image description here

I couldn`t find a way to position multiple logo images, out of the container of each card, i also have tried absolute positioning but it keeps related to the viewport and not to the card. Moreover, i tried to use pseudoelements, but i couldn't pass the url dynamically into the pseudoelement.

Thanks for helping!!

Answer 1

According to the documentation on position, when using position: absolute, "it is positioned relative to its closest positioned ancestor".

A positioned ancestor is simply an element that also has position defined as something other than static. If none of your image's ancestors are positioned, then it will be positioned relative to the viewport.

The common approach is therefore to use position: relative on an ancestor of your image (in your case, probably on the card element).

body {
  padding: 2rem;
}

.card {
  position: relative;
  border: 1px solid red;
  width: 10rem;
  height: 5rem;
}

.image {
  position: absolute;
  top: -1rem;
  left: 0.5rem;
  
  background: blue;
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
}

<div class="card">
  <div class="image"></div>
</div>