'位置：固定'在 div 内的按钮上隐藏按钮

Question

我正在使用 draggable-dnd 库创建一个看板 React 应用程序。可拖动的 div（或“任务”）是应用程序的一部分，我想添加“X”按钮以在单击时删除这些可拖动。当我将这些按钮放置在 Draggable 的 div 中时，它们会以它们的正确功能出现。但是我想正确地设置它们的样式，并将它们固定在右上角。所以我尝试添加position:'fixed' 以及top 和right 职位。但是当这个 CSS 被实现时，按钮就消失了。更奇怪的是，当我拖动可拖动对象时，按钮会暂时出现，直到重新放置可拖动对象。我尝试将按钮的 z-index 更改为大数字，以及将按钮重新包装在 div 中，但无济于事。

draggable 背后的通用代码：

<Draggable>
 <div>
   <RemoveDraggableButton/>
 </div>
</Draggable>

还有按钮：

class RemoveDraggableButton extends React.Component {
 ...

  render () {
    return (
        <button 
          onClick={this.handClick}
          style={{
                  position:'fixed',
                  top: 10,
                  right: 10,
                    }}>
          X
          </button>
    );
  };
}

GitHub

Answer 1

也许，您可以尝试提供每个 div，它是 RemoveDraggableButton CSS 属性的父级 position: relative 和可拖动按钮的 position: absolute。这样，按钮的位置将基于父元素而不是窗口对象