'position: fixed' on button within a div 隐藏按钮

Question

我正在使用 draggable-dnd 库创建看板 React 应用程序。可拖动 divs（或“任务”）是应用程序的一部分，我想添加“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 属性的父级位置：相对和可拖动按钮作为位置：绝对。有了这个，按钮的位置将基于父元素而不是 window object

'position: fixed' on button within a div 隐藏按钮

'position: fixed' on button within a div hides the button

javascript

css

draggable

reactjs