Home>

I'm trying to apply element overlap, but it doesn't work.
Although the order is applied by z-index, the yellow part comes under the user and the icon, but I want to apply it so that the yellow part goes under the shadow. (The shadow part is the black part in the middle of the image)
Please tell me how.

The code is as follows.


     {{room_object.goulmet_id}} 
    
       <i></i>
       <i aria-hidden = "true"></i>
    


    
        {% if item.user_id.icon%}
        
        {% else%}
        
        {% endif%}
    
    
      <p><strong>{{item.user_id}}</strong>{{item.created_at}}</p>
      <p>{{item.text}}</p>
    
  
.header {
    text-align: center;
    margin: 20px 0;
    height: 60px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 7px 10px 0px rgba (0,0,0,0.2);
    padding: 0 20px;
    position: sticky;/* fix * /
    position: -webkit-sticky;/* Vendor prefix for Safari * /
    top: 90;
    z-index: 1;
}
.box {
    display: flex;
    margin-bottom: 25px;
    margin-left: 5px;
    z-index: -1;
}