滚动时如何让div的box-shadow内阴影覆盖内部表单元素？

嘿，这个问题我之前也碰到过！核心原因是：inset类型的box-shadow是绘制在元素的背景层上的，而容器里的表单元素属于内容层——内容层的层级本来就比背景层高，所以哪怕你给容器加再高的z-index，阴影也没法盖过内部的表单。

下面给你两种好用的解决方案，选哪个都能搞定：

方案一：用伪元素模拟内阴影（首推） #

不需要改HTML结构，直接给#div-operador加个伪元素，让它固定在容器顶部，用这个伪元素来做阴影，再把它的层级调得比表单高就行。

修改后的CSS代码： #

#div-operador {
  padding-top: 5px;
  overflow: auto;
  width: auto;
  max-height: 205px;
  height: 205px;
  /* 加相对定位，让伪元素能基于它定位 */
  position: relative;
}

/* 替换原来的shadow类，用伪元素实现阴影 */
#div-operador.shadow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px; /* 和你原来阴影的参数对应上 */
  box-shadow: 0 7px 9px -7px rgba(0,0,0,0.7);
  z-index: 10; /* 只要比内部表单的层级高就可以 */
  pointer-events: none; /* 关键！让伪元素不挡着表单的点击、输入 */
}

JS代码不用改，还是你原来的逻辑： #

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

方案二：加个独立的遮罩层 #

如果你不想用伪元素，也可以在容器内部最顶部加个空div当遮罩，通过控制它的显示隐藏来实现阴影效果。

先修改HTML结构（在#div-operador里最顶部加这个遮罩层）： #

<div id="div-operador" class="col-md-12">
  <!-- 新增的阴影遮罩层 -->
  <div class="shadow-overlay"></div>
  <!-- 你原来的表单内容 -->
  <div class="row clearfix">
    <!-- ... 这里是你的表单元素 ... -->
  </div>
</div>

对应的CSS代码： #

#div-operador {
  padding-top: 5px;
  overflow: auto;
  width: auto;
  max-height: 205px;
  height: 205px;
  position: relative;
}

.shadow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  box-shadow: 0 7px 9px -7px rgba(0,0,0,0.7);
  z-index: 10;
  pointer-events: none;
  display: none; /* 默认隐藏 */
}

/* 滚动时显示遮罩层 */
#div-operador.shadow .shadow-overlay {
  display: block;
}

JS代码依然保持不变： #

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

小提醒： #

不管用哪个方案，pointer-events: none都不能忘——它能让阴影层“透”过去，保证表单元素能正常被点击、输入，不会被阴影层挡住交互。

内容的提问来源于stack exchange，提问作者Wagner Fillio