z-index for the nested div

Question

I expect to get this result:
https://ibb.co/htJD6J
In my styles I've set to the parent position relative; z-index 50. For the child I've set position absolute; z-index 25. But as a result, I've got this.
https://ibb.co/cwhjDy
P.S. Sorry, not enough reputation to post images. So, I can't understand why z-index isn't worked correctly. Can anybody help me with it?

Add code: parent

.sel_project_block {
 background-color: #f5876e;
 border-radius: 14px;
 margin-right: 150px;
 width: 239px;
 height: 34px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 position: relative;
 box-shadow: 1px 3px 7px #000;
 z-index: 5;
}

child

.additional {
 max-width: 185px;
 position: absolute;
 top: 76.2%;
 right: 22.05%;
 z-index: 1;
 color: #67573e;
 background-color: #fff;
 border: 1px solid #978d7e;
 font-size: 16px;
 width: 185px;
}

Answer 1

Because the .child is relative to its .parent, so does its z-index.

You can do away with this by removing the z-index of the parent:

.sel_project_block {
  background-color: #f5876e;
  border-radius: 14px;
  margin-right: 150px;
  width: 239px;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  box-shadow: 1px 3px 7px #000;
}

.additional {
  height: 50px;
  max-width: 185px;
  position: absolute;
  top: 76.2%;
  right: 22.05%;
  z-index: -1;
  color: #67573e;
  background-color: #fff;
  border: 1px solid #978d7e;
  font-size: 16px;
  width: 185px;
}

<div class="sel_project_block">
  <div class="additional"></div>
</div>