具有box-shadow属性的div元素重叠

Question

启动滚动时，我将一个类添加到div-operator，使它在div-operator的顶部显示一个框形阴影。

但是根据下图，输入，选择等...元素在阴影上方。

在卷起时如何使顶部阴影与div运算符内部的元素重叠？

$('#div-operador"').scroll(function() {
    var y = $(this).scrollTop();
    if (y > 1) {
	$('#div-operador').addClass('shadow');
    }
    else {
        $('#div-operador').removeClass('shadow');
    }
});

#div-operador {
   padding-top: 5px;
   overflow: auto;
   width: auto;
   max-height: 205px;
   height: 205px;
}
.shadow {
   box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
   z-index:5;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="col-xs-8">
   <div id="div-operador" class="col-md-12">
      <div class="row clearfix">
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-perfil">Perfil</label>
                  <select id="sel-perfil" class="form-control input-sm form-md-3" name="perfil"  title="Perfil" autocomplete="off" required >
                      <option>Perfil</option>
                  </select>
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-nivel">Nível</label>
                  <select id="sel-nivel" class="form-control input-sm form-md-3" name="nivel"  title="nivel" autocomplete="off" required >
                      <option>Perfil</option>
                  </select>
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-email">email</label>
                  <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="txt-login">login</label>
                  <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
             </div>
          </div>
       </div>
   </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 1

谢谢。

我在此处用葡萄牙语on here

在SO中解决了此问题