Angular 1拖拽组件添加overflow-y:auto后显示异常求助

我有一个基于Angular 1的应用，使用了angular dragdrop库。以下是视图中可拖拽卡片的容器代码：

<div class="thumbnail stage" data-drop="true" ng-model="column.items" data-jqyoui-options="column.options" jqyoui-droppable="{multiple:true, onDrop: 'onDropCard($event, $ui)'}" data-column-index3="{{column}}">
    <div class="caption">

可拖拽项的代码如下：

<div ng-repeat="item in column.items" class="card-item-height">
    <md-list-item class="md-3-line btn-draggable card-item" ng-class="{'card-item-margin': !$last}" ng-show="item.prospect_name" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="column.items" jqyoui-draggable="{index: {{$index}}, animate:true}" id="draggable-item-{{$index}}" data-column-index="{{$parent.$index}}" data-column-index2="{{item}}">

问题：给.caption类添加overflow-y:auto属性后，拖拽卡片到容器外时，卡片会显示在其他容器的后方；移除该属性则没有这个问题。如何在保留overflow-y:auto的同时让拖拽项正常显示？

这个问题的核心是overflow-y:auto会让.caption容器创建新的堆叠上下文，拖拽元素默认被限制在这个上下文内，拖出后就会被其他容器的堆叠上下文覆盖。可以用以下几种方法解决：

• 临时提升拖拽元素层级
  在拖拽开始时给拖拽元素设置极高的z-index，结束后恢复默认值。
  首先修改拖拽项的指令配置，添加开始和结束事件：

  jqyoui-draggable="{index: {{$index}}, animate:true, start: 'onDragStart($event, $ui)', stop: 'onDragStop($event, $ui)'}"
  

  然后在控制器中实现对应的方法：

  $scope.onDragStart = function(event, ui) {
      ui.helper.css('z-index', 9999); // 设一个足够高的数值，确保超过其他容器
  };
  $scope.onDragStop = function(event, ui) {
      ui.helper.css('z-index', ''); // 拖拽结束后恢复原有层级
  };
  

• 调整容器的堆叠层级
  给外层的.thumbnail.stage容器设置相对定位和更高的z-index，确保它的堆叠上下文优先级高于其他容器：

  .thumbnail.stage {
      position: relative;
      z-index: 10;
  }
  

  这样即使内部拖拽元素在overflow容器里，拖出后也会处于当前容器的堆叠上下文之上，不会被其他容器挡住。

• 将拖拽元素临时挂载到body
  利用库的配置，在拖拽开始时把元素移到<body>标签下，脱离原容器的堆叠上下文：

  jqyoui-draggable="{index: {{$index}}, animate:true, appendTo: 'body'}"
  

  这种方法能彻底避免原容器的overflow和堆叠上下文影响，拖拽元素会直接处于页面最顶层的上下文里。

内容的提问来源于stack exchange，提问作者Some d