如何使通知图标停留在框的右上角？ [关闭]

【问题标题】：How to make notification icons stay stuck to top-right corner of box? [closed]如何使通知图标停留在框的右上角？ [关闭]
【发布时间】：2019-12-21 18:58:13
【问题描述】：

我使用绝对定位将通知图标定位到框的右上角，但是当屏幕尺寸发生变化时，通知图标会远离它们应该定位的位置。

How the image should loook

How image looks when screen size is adjusted

我怎样才能让他们留在他们应该呆的地方？

【问题讨论】：

..但您似乎没有在父级上使用 position:relative 设置定位 context。

标签： javascript css reactjs styled-components

【解决方案1】：

尝试将您的组件和徽章通知包装在一个

中

<div style={{ position: 'relative' }}>
 <component />
 <badge style={{ position: 'absolute', top: 0, right: 0 }} />
</div>

包装 div 应保持 div 内徽章的“绝对”位置。因此，当您的组件调整大小时，div 也会调整大小，因此您的徽章会粘在 div 中。

【讨论】：