JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<p>
Detta är en container med position "relative" som är det man har som standard på de flesta element.
</p>
<p>
Den gröna bollen är ett element positionerat med "absolut" position. Den kommer alltid förhålla sig till hörnet av "container".
</p>

<div class="circle">
</div>

</div>

<div class="container">
<p>
Detta är en container med position "relative" som är det man har som standard på de flesta element.
</p>
<p>
Den blå bollen är ett element positionerat med "absolut" position. Den kommer alltid förhålla sig till mitten/botten "container".
</p>
<div class="circle-bottom"></div>
</div>

<div class="container">
<p>
Detta är en container med position "relative" som är det man har som standard på de flesta element.
</p>
<p>
De ovanstående elementen kombinerade bara för att visa hur du kan leka runt.
</p>
<div class="circle-bottom"></div>
<div class="circle"></div>
</div>

CSS

.container {
  position:relative;
  width: 500px;
  margin: 50px auto;
  padding: 10px;
  background: #999;
}

.circle {
  width: 50px;
  height: 50px;
  position: absolute;
  left: -25px;
  top: -25px;
  border-radius: 50%;
  background: green;
}
.circle-bottom {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  right:0;
  bottom: -25px;
  margin: 0 auto;
  border-radius: 50%;
  background: blue;
}