HTML element appears out of the pages edge

Question

I createed the following HTML element:

<div classname='PopUp> </div>

and I gave it the following CSS properties:

.PopUp{
padding: 8px 7px 6px;
          position: absolute;
          z-index: 1;
          top: -10000px;
          left: -10000px;
          margin-top: -6px;
          opacity: 0;
          background-color: gray;
          border-radius: 4px;
          transition: opacity 0.75s;
}

Now I make it to pop up relative to the mouse-curser piston and I gave it the following rules:

import {
  Range,
  Editor,
  Transforms,
  createEditor,
  Node,
  Element as SlateElement,
} from "slate";

React.useEffect(() => {
    const el = ref.current;
    const { selection } = editor;

    if (!el) {
      return;
    }

    if (
      !selection ||
      !ReactEditor.isFocused(editor) ||
      Range.isCollapsed(selection) ||
      Editor.string(editor, selection) === ""
    ) {
      el.removeAttribute("style");
      return;
    }

    const domSelection = window.getSelection()!;
    const domRange = domSelection.getRangeAt(0);
    const rect = domRange.getBoundingClientRect();
    el.style.opacity = "1";
    el.style.top = `${rect.top + window.pageYOffset - el.offsetHeight}px`;
    el.style.left = `${
      rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2
    }px`;
  });

But when it appears, part of it appears behind the website page... How to fix that?

Answer 1

you need to set the el.style.left to 0px when the curser is close the pages's edge. So, replace el.style.left = ${rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2}px with

const position = rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2;
el.style.left = `${position < 0 ? 0 :position}px`;