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

Question

I am creating a kanban board React app using the draggable-dnd library. Draggable divs (or "tasks") are part of the application, and I want to add "X" buttons to remove those draggables upon clicking. These buttons appear with their proper functionality when I place them inside the Draggable's div. However I want to style them properly with them fixed in the top right corner. So I've tried to add position:'fixed' as well as top and right positions. But when this CSS is implemented, the buttons disappear. What's weirder is that when I drag the draggable, the buttons temporarily appear until the draggable is re-dropped. I've tried changing the z-index of the button to high numbers, as well as re wrapping the button in a div, but to no avail.

The general code behind the draggable:

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

And the button:

class RemoveDraggableButton extends React.Component {
 ...

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

The GitHub

Answer 1

Perhaps, you can try by providing each div which is a parent of RemoveDraggableButton CSS property of position: relative and to the draggable button as position: absolute. With this , the position of the button would be based on the parent element rather than window object