Jak przesunąć element w wybrane miejsce?

Jak mógłbym zrobić taki efekt, chciałbym zrobić takie 3, na flexboxie, tylko nie wiem jakby dodać jakieś element/zdjęcie tak jak jest to pokazane na czerwono na zdjeciu, z góry dziękuje za rady :)

Masz parametr css position: absolution, który położenie definiuje bezpośrednio i nie uwzględnia wyrównań i niczego.

Zrobiłem takie coś: https://jsfiddle.net/ush62mk4/27/
UPDATE: Zauważyłem, że przed dolną granicą kontenera jest przerwa, więc aktualizuję kod: https://jsfiddle.net/ush62mk4/39/ (poniższy też zaktualizowałem).

HTML:

<div id="container">
  <div id="rectangle">
  </div>
  <div id="disc">
  </div>
</div>

CSS:

#container {
  display: flex;
  /* zmieniamy osie, zeby elementy kontenera nie wyswietlaly sie obok siebie (tak jest domyslnie), tylko jeden nad drugim */
  flex-direction: column;
  /* wysrodkowujemy elementy kontenera */
  align-items: center;
}

#rectangle {
  width: 150px;
  height: 300px;
  background-color: grey;
  /* "relative" oznacza "w stosunku do kontenera" */
  position: relative;
  /* ta wartosc jest rowna polowie promienia kola */
  top: 25px;
  /* trzeba dac, zeby nie bylo przerwy pomiedzy tym elementem a dolna granica kontenera; jest to polowa promienia kola */
  margin-bottom: -25px;
}

#disc {
  /* wysokosc = szerokosc = promien kola */
  width: 50px;
  height: 50px;
  background-color: red;
  /* jak bardzo ten element ma zostac zaokraglony */
  border-radius: 25px;
  position: relative;
  /* 275px = wysokosc szarego prostokata minus polowa promienia kola */
  top: -275px;
}

Przy czym jest kilka możliwości uzyskania takiego efektu. Przyszła mi od razu druga możliwość z użyciem z-index, ale pomyślałem, że z-index lepiej nie ruszać, jeśli się nie zna układu wszystkich elementów na stronie, więc zrobiłem wersję z ujemną wartością własności top.

UPDATE 2: Może się przyda: https://css-tricks.com/snippets/css/a-guide-to-flexbox/