Make a div visible on full screen of another div

I made an element take full screen by using the below method:

if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else {
  return;
}

It works well but I want to show another element when on the fullscreen mode.

The other element has position: fixed and z-index: 999999999 but it's not visible when on fullscreen mode.

Could anyone help me, please?

Below is the link to the example

https://stackblitz.com/edit/web-platform-z1phjd?file=index.html

So I want to show the blue element when the red element is full screen sized.

from Make a div visible on full screen of another div