Custom web component. Glues an element so hard it doesn't budge when you go fullscreen and back. Pretty much only works on Windows, Brave shields break it, and doesn't play well with multi-monitor setups.

position-glue.js

customElements.define('position-glue', class extends HTMLElement {
  #chromeSize = null;
  #originalPosition = null;

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.adoptedStyleSheets = [this.#createStyleSheet()];
  }

  connectedCallback() {
    this.#chromeSize = this.#getBrowserChromeSize();
    this.#originalPosition = this.#getSelfPosition();
    this.#createSlot();
    this.#attachFullscreenHandler();
  }
  
  #createSlot() {
    const slot = document.createElement('slot');
    this.shadowRoot.appendChild(slot);
  }

  #attachFullscreenHandler() {
    const handler = () => {
      if (this.#isFullscreen()) {
        this.#handleFullscreenEntry();
      } else {
        this.#handleFullscreenExit();
      }
    }

    document.addEventListener('webkitfullscreenchange', () => { handler(); });
    document.addEventListener('mozfullscreenchange', () => { handler(); });
    document.addEventListener('fullscreenchange', () => { handler(); });
    document.addEventListener('MSFullscreenChange', () => { handler(); });
  }

  #isFullscreen() {
    return Boolean(
      document.fullscreenElement || document.mozFullScreenElement ||
      document.webkitFullscreenElement || document.msFullscreenElement);
  }

  #handleFullscreenEntry() {
    requestAnimationFrame(() => {
      this.#setOffset(this.#originalPosition);
    });
  }

  #handleFullscreenExit() {
    requestAnimationFrame(() => {
      this.#setOffset();
    });
  }

  #getSelfPosition() {
    const browser = this.#getBrowserPosition();
    return {
      top: browser.top + this.#chromeSize.height,
      left: browser.left + this.#chromeSize.width,
      right: browser.right,
      bottom: browser.bottom
    };
  }

  #getBrowserChromeSize() {
    const dpr = window.devicePixelRatio;
    return {
      width: window.outerWidth - (window.innerWidth * dpr),
      height: window.outerHeight - (window.innerHeight * dpr)
    };
  }

  #getBrowserPosition() {
    return {
      top: window.screenY,
      left: window.screenX,
      right: window.screen.width - window.screenX - window.outerWidth,
      bottom: window.screen.height - window.screenY - window.outerHeight
    };
  }

  #setCustomProperty(name, value) {
    this.style.setProperty(`--${name}`, `${value}`);
  }

  #setOffset(offset) {
    const dpr = window.devicePixelRatio || 1.0;
    if (!offset) {
      offset = { top: 0, left: 0, right: 0, bottom: 0 };
    }
    this.#setCustomProperty('top', `${offset.top / dpr}px`);
    this.#setCustomProperty('left', `${offset.left / dpr}px`);
    this.#setCustomProperty('right', `${offset.right / dpr}px`);
    this.#setCustomProperty('bottom', `${offset.bottom / dpr}px`);
  }

  #createStyleSheet() {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`
      :host {
        position: fixed;
        top: var(--top, 0px);
        left: var(--left, 0px);
        right: var(--right, 0px);
        bottom: var(--bottom, 0px);
        display: grid;
        place-items: center;
      }
    `);
    return sheet;
  }
});