useRefを使って位置を取得したい

Question

前提・実現したいこと

useRefを使用してclassNameのボックスの位置を取得し、divと同じ位置にCardを表示したいです。
useRefを使用してdivの位置を取得したいのですがどのようにしたらいいのでしょうか？

どのように実装すればよいですか？

該当のソースコード

const Index: FunctionComponent = () => {
  const cardRef = useRef<HTMLDivElement>(null);
  const Click = () => {};
  return (
    <>
      <Card height={100} width={200}>
        Card
      </Card>
      <div style={{ height: '150px' }}></div>
      <div className="box"ref={cardRef} onClick={() => Click()}>

      </div>
    </>
  );
};

Comments

[maisumakun]

> divと同じ位置にCardを表示したいです。

<div>の中に<Card>を書くという、素直な方法では実現できないのでしょうか？

[miku12323]

実現はできますが、useRefで位置を取得する方法が知りたいので投稿しました。

[maisumakun]

位置を取得したところで、<Card>をそれに合わせて動かすのが難しいですので、質問は「位置を取得する」ことに特化して書き直したほうがいいかと思います。