要素の重なりがうまく機能しない

要素の重なりを適用しようと試みてるのですが、うまく適用されません。
z-indexで順番は適用しているものの、userやアイコンの下に黄色部分が来ているものの、影の下に黄色部分を潜り込んでいくように適用したいです。（影の部分は画像の真ん中あたりにある黒い部分）
方法を教えてください。

コードは以下の通り。

HTML
1<div class="header">
2    <h2>{{room_object.goulmet_id}}</h2>
3    <div>
4        <a style="color: black; margin-right: 15px;" href="{% url 'reservation:reservation_goulmet' pk=room_object.order_id.pk %}"><i class="fas fa-info-circle fa-2x"></i></a>
5        <a style="color: black;" href="{% url 'chat:user_chat' pk=room_object.pk %}"><i class="fa fa-refresh fa-2x" aria-hidden="true"></i></a>
6    </div>
7</div>
8
9<div class="box">
10    <div class="icon">
11        {% if item.user_id.icon %}
12        <img class="icon" src="{{item.user_id.icon.url}}" alt="">
13        {% else %}
14        <img class="icon" src="{% static 'img/no_icon.png' %}" alt="" id="preview">
15        {% endif %}
16    </div>
17    <div class="user-info">
18        <p><strong>{{item.user_id}}</strong> {{item.created_at}}</p>
19        <p class="user_chat">{{item.text}}</p>
20    </div>
21    </div>

css
1.header{
2    text-align: center; 
3    margin: 20px 0;
4    height: 60px;
5    display: flex;
6    justify-content: space-between;
7    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.2);
8    padding: 0 20px;
9    position: sticky;/*固定する*/
10    position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
11    top: 90;
12    z-index: 1;
13}
14
15.box{
16    display: flex;
17    margin-bottom: 25px;
18    margin-left: 5px;
19    z-index: -1;
20}