如何在表格的边框上放置通知警报？答案

【问题标题】：How do I put notification alert on the border of the table?如何在表格的边框上放置通知警报？
【发布时间】：2021-08-18 06:54:21
【问题描述】：

有人知道如何使用 react 将这个图标（“15”它是通知警报）放在表格的边框上。它停留在和元素之间。我尝试谷歌一些解决方案，但找不到。

设计图：CLICK

【问题讨论】：

这似乎是一个与 css 相关的问题，没有具体反应。如果您在 js 解决方案中使用 css 来实现您的样式，请添加您目前尝试过的代码。
我不知道把它放在哪里反应，所以我什至没有开始使用 css :(

标签： css reactjs typescript redux

【解决方案1】：

TL;DR;

<section class="block">
  <div class="badge"></div>
</section>

.block {
  position: relative;
}

.badge {
  position: absolute;
  /* move it based on the parent position */
}

JSX 中的另一个版本

export default function BlockWithBadge({ badge, children }) {
  return (
    <>
      <section className="block">
        <div className="badge">{ badge }</div>
        { children }
      </section>
      <style jsx scoped>{`
        .block {
          position: relative;
        }

        .badge {
          position: absolute;
          /* move it based on the parent position */
        }
      `}</style>
    </>
  )
}

TSX 中的另一个版本

import type { ReactNode } from "react";

export interface BlockWithBadgeProps {
  badge: number;
  children: ReactNode;
}

export default function BlockWithBadge({ badge, children }: BlockWithBadgeProps) {
  return (
    <>
      <section className="block">
        <div className="badge">{ badge }</div>
        { children }
      </section>
      <style jsx scoped>{`
        .block {
          position: relative;
        }

        .badge {
          position: absolute;
          /* move it based on the parent position */
        }
      `}</style>
    </>
  )
}

怎么做？

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

完整示例

https://jsfiddle.net/pan93412/L809udzq/

我已经在那里写了完整的评论。

【讨论】：