[英]'position: fixed' on button within a div hides the button
I am creating a kanban board React app using the draggable-dnd library.我正在使用 draggable-dnd 库创建看板 React 应用程序。 Draggable divs (or "tasks") are part of the application, and I want to add "X" buttons to remove those draggables upon clicking.可拖动的 div(或“任务”)是应用程序的一部分,我想添加“X”按钮以在单击时删除这些可拖动。 These buttons appear with their proper functionality when I place them inside the Draggable's div.当我将这些按钮放置在 Draggable 的 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.所以我尝试添加position:'fixed'
以及top
和right
位置。 But when this CSS is implemented, the buttons disappear.但是当这个 CSS 被实现时,按钮消失了。 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.我尝试将按钮的 z-index 更改为大数字,以及将按钮重新包装在 div 中,但无济于事。
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>
);
};
}
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.也许,您可以尝试通过提供每个 div,它是 RemoveDraggableButton CSS 的RemoveDraggableButton
属性的父级:相对于可拖动按钮 position:绝对。 With this, the position of the button would be based on the parent element rather than window object这样,按钮的 position 将基于父元素而不是 window object
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.