这个问题我之前也碰到过，z-index没用是因为ScrollView的裁剪逻辑不是层级问题，而是容器的溢出裁剪规则在起作用——默认情况下ScrollView会把超出自身边界的子元素裁剪掉，哪怕子元素层级更高也没用。给你几个可行的解决思路：

1. 将可拖动元素移出ScrollView的层级 #

这是最常用的方案：把需要拖动的元素从ScrollView内部移出来，和ScrollView放在同一个父容器下，用绝对/固定定位控制位置。拖动时，我们可以克隆原元素或者直接移动这个独立的元素，这样它就不受ScrollView的裁剪限制了。

举个Web环境下的简单示例：

<!-- 父容器 -->
<div class="drag-container" style="position: relative; height: 300px;">
  <!-- ScrollView容器 -->
  <div class="scroll-view" style="height: 100%; overflow-y: auto;">
    <!-- 列表元素，绑定拖拽事件 -->
    <div class="draggable-item" draggable="true">元素1</div>
    <div class="draggable-item" draggable="true">元素2</div>
  </div>
  <!-- 拖动时显示的浮层元素，初始隐藏 -->
  <div class="drag-float" style="position: absolute; pointer-events: none; display: none; z-index: 100;"></div>
</div>

对应的JavaScript逻辑：

const floatElement = document.querySelector('.drag-float');
const draggableItems = document.querySelectorAll('.draggable-item');

draggableItems.forEach(item => {
  item.addEventListener('dragstart', (e) => {
    // 克隆原元素的内容和样式
    floatElement.textContent = item.textContent;
    floatElement.style.width = item.offsetWidth + 'px';
    floatElement.style.height = item.offsetHeight + 'px';
    floatElement.style.backgroundColor = getComputedStyle(item).backgroundColor;
    // 设置初始位置
    const rect = item.getBoundingClientRect();
    floatElement.style.left = rect.left + 'px';
    floatElement.style.top = rect.top + 'px';
    floatElement.style.display = 'block';
  });

  item.addEventListener('drag', (e) => {
    // 实时更新浮层位置
    floatElement.style.left = e.clientX - floatElement.offsetWidth/2 + 'px';
    floatElement.style.top = e.clientY - floatElement.offsetHeight/2 + 'px';
  });

  item.addEventListener('dragend', () => {
    floatElement.style.display = 'none';
  });
});

2. 关闭ScrollView的裁剪行为（按需使用） #

如果你的平台允许，可以直接关闭ScrollView的裁剪属性，这样内部元素超出边界也不会被裁剪。不过要注意，这可能会导致ScrollView的滚动区域出现视觉问题，需要配合内层容器来控制滚动范围。

• Web环境：把ScrollView的overflow从auto/scroll改成visible，但内层需要加一个固定高度的容器来实现滚动：

.scroll-container {
  height: 300px;
  overflow: visible; /* 关闭裁剪 */
}
.scroll-content {
  height: 100%;
  overflow-y: auto; /* 内层处理滚动 */
}

• Flutter环境：设置ScrollView的clipBehavior为Clip.none：

ScrollView(
  clipBehavior: Clip.none,
  // ...其他属性
)

• React Native环境：给ScrollView添加clipsToBounds={false}属性：

<ScrollView clipsToBounds={false}>
  {/* 子元素 */}
</ScrollView>

3. 使用专业拖拽库的层级管理功能 #

很多成熟的拖拽库（比如dnd-kit、react-dnd、SortableJS）都内置了“拖拽浮层”的功能，会自动把拖动中的元素挂载到更高层级的容器（比如body），完全避开ScrollView的裁剪限制。

比如用dnd-kit的话，只需要配置DragOverlay组件即可：

import { DndContext, DragOverlay } from '@dnd-kit/core';

function App() {
  const [activeItem, setActiveItem] = useState(null);

  return (
    <DndContext
      onDragStart={(event) => setActiveItem(event.active)}
      onDragEnd={() => setActiveItem(null)}
    >
      <ScrollView>
        {/* 你的可拖动元素列表 */}
      </ScrollView>
      {/* 拖拽浮层，自动显示拖动中的元素 */}
      <DragOverlay>
        {activeItem && <DraggableItem item={activeItem.data.current} />}
      </DragOverlay>
    </DndContext>
  );
}

这个方案最省心，不需要手动处理元素层级和位置，库已经帮你搞定了。

内容的提问来源于stack exchange，提问作者Don Joe