requestFullscreen() andere Elemente einblenden

[minicheffe]

Hallo,
ich hoffe ich bin hier als Anfänger mit meiner Frage richtig!
Ich baue eine Webseite mit verschiedenen Landkarten. In den Landkarten sind dann in einer gesonderten Box verschiedene Punkte von Interesse aufgeführt.
Nun hat der User die Möglichkeit, über eine checkbox, die Karte in den Fullscreen Modus zu setzten.

Code:

  <div class="map-container">
    <div class="map" id="mapMuseenUndMehr"></div>
    <div class="divTextContainerRight">
      <div class="divText">
        <h2>Museen und mehr</h2>
        <p>Stadt XY hat auch einiges an Kultur zu bieten, besonders bei schlechtem Wetter zu empfehlen.<br>
        <ul id="tourPointsListMuseen">Museen</ul>
        <ul id="tourPointsListTheater">Theater</ul>
      </div>
    </div>
    <div class="mapOn">
      <label for="mapOn">map on:</label>
      <input type="checkbox" id="mapOn" name="mapOn">
    </div>
  </div>

und der dazugehörige Javascript Code:

Code:

function toggleFullscreen() {
  var checkbox = document.getElementById("mapOn");
  var mapContainer = document.getElementById("mapMuseenUndMehr");

  if (checkbox.checked) {
    console.log("Checkbox gecheckt");
    mapContainer.requestFullscreen(); // Vollbildmodus aktivieren
    checkbox.style.zIndex = 10000;
  } else {
    console.log("Checkbox unchecked");
    if (document.exitFullscreen) {
      document.exitFullscreen(); // Vollbildmodus beenden (kompatibel mit verschiedenen Browsern)
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

Mein Problem ist nun, dass im Vollbild alle Elemente in der Map in den Hintergrund rutschen und nicht mehr sichtbar sind.
Wie bekomme ich es hin, dass die Elemente z.B. divTextContainer weiterhin sichtbar bleiben? Über den z-index ist es mir leider nicht gelungen.

Vorweg vielen Dank
Christoph