Как разместить всплывающее окно на основе позиции другого элемента div, используя javascript, и реагировать?

Question

Я хочу разместить всплывающее окно в зависимости от позиции элемента leftnav. в основном разместите это всплывающее окно рядом с элементом lefnav так, чтобы оно было вертикально по центру элемента leftnav.

ниже показано, как следует разместить всплывающее окно

below is my code,

function LeftNav() {
    return (
         ); } const Wrapper = styled.div` position: absolute; верх: 50%; вправо: 16 пикселей; дисплей: гибкий; flex-direction: столбец; гибкость: 1; `; функция PopUp () {const left_nav_el = document.getElementById ('left_nav'); возвращение ( ); } const PopupWrapper = styled.div` width: 400px; положение: относительное; дисплей: нет; `; 

Я не уверен, как получить верхний левый угол leftnav и использовать его в качестве координат для размещения всплывающего окна в центре и на 16 пикселей от leftnav. может кто-нибудь помочь мне с этим. спасибо.

Answer 1

const App = () => {
function LeftNav() {
    return (
      <div
        style={{
        height: "50px",
        background: "black",
        width: "50px"
         }}
    id="left_nav"
  />
);
}

 function PopUp() {
    return (
      <div
       style={{
         marginRight: "16px",
         height: "100px",
         background: "green",
         width: "50px"
        }}
       className="popup"
    />
   );
  }
  return (
    <div
      style={{ width: "100px", display: "flex", alignItems: "center"}}
        className="App"
      >
     <LeftNav />
     <PopUp />
     </div>
    );
  }