Почему не работает z-index?

Question

[ajlee4]

Уважаемы эксперты. Подскажите почему не работает z-index и дочерний блок с меньшим индексом перекрывает родительский.
https://codepen.io/ajlee4/pen/qBEbqLz

Должно быть так

Answer 1

[Sagrana]

Comments

[ajlee4]

Спасибо вам уважаемая)

Answer 2

[Dmmitry]

потому что им нужен родитель

<div class="parent">
<div class="item">
</div>
  <div class="label">
    asdasdasd
  </div>
</div>

body {
  background: rgba(12, 77, 162, 0.07);
  
}
.parent {
  position: relative;
  width: 300px;
}
.item {
      padding: 40px 30px 30px;
  width: 250px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0px 0px 18px rgba(171, 171, 175, 0.45);
            position: relative;
            z-index: 9999;
            margin-right: 70px;
           
}
.label {
       position: absolute;
                top: 50%;
                margin-top: -15px;
                right: -70px;
                 height: 30px;
  
                border-radius: 15px;
                background-color: #fff;
                width: 80px;
             
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
}