JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://dummyimage.com/600x100/eeeeee/800080&text=z-index:+10" alt="">

<div>
  <figure>Дитя; z-index: 20</figure>
  Родитель; z-index не указан
</div>

CSS

img {
  vertical-align: middle;
  width: 100%;
  height: auto;
  display: block;
  z-index: 10;
  position: relative;
}

div {
  background-color: purple;
  padding: 20px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

figure {
  color: purple;
  margin: 0;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 #000;
  position: relative; /* обязательно */
  top: -50px; /* вот тут */
  z-index: 20;
  border-radius: 10px;
}

body {
  margin: 0;
  font-family: sans-serif;
}