Merge pull request #15862 from calixteman/layers_zindex

Set a z-index for the different layers within a page (fixes #15861)

web/annotation_editor_layer_builder.css

@@ -60,7 +60,7 @@
   font-size: calc(100px * var(--scale-factor));
   transform-origin: 0 0;
   cursor: auto;
-  z-index: 20000;
+  z-index: 4;
 }
 
 .annotationEditorLayer.freeTextEditing {

web/annotation_layer_builder.css

@@ -44,6 +44,7 @@
   left: 0;
   pointer-events: none;
   transform-origin: 0 0;
+  z-index: 3;
 }
 
 .annotationLayer section {

web/pdf_page_view.js

@@ -804,19 +804,7 @@ class PDFPageView {
     // overflow will be hidden in Firefox.
     const canvasWrapper = document.createElement("div");
     canvasWrapper.classList.add("canvasWrapper");
-
-    if (this.textLayer) {
-      this.textLayer.div.before(canvasWrapper);
-    } else {
-      const lastDivBeforeTextDiv =
-        this.annotationLayer?.div || this.annotationEditorLayer?.div;
-      if (lastDivBeforeTextDiv) {
-        // The annotation layer needs to stay on top.
-        lastDivBeforeTextDiv.before(canvasWrapper);
-      } else {
-        div.append(canvasWrapper);
-      }
-    }
+    div.append(canvasWrapper);
 
     if (
       !this.textLayer &&
@@ -830,7 +818,7 @@ class PDFPageView {
         accessibilityManager: this._accessibilityManager,
         isOffscreenCanvasSupported: this.isOffscreenCanvasSupported,
       });
-      canvasWrapper.after(this.textLayer.div);
+      div.append(this.textLayer.div);
     }
 
     if (

web/pdf_viewer.css

@@ -55,6 +55,7 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
+  z-index: 1;
 }
 
 .pdfViewer .page {
@@ -156,6 +157,7 @@
   right: 0;
   bottom: 0;
   background: url("images/loading-icon.gif") center no-repeat;
+  z-index: 5;
 }
 .pdfViewer .page .loadingIcon.notVisible {
   background: none;

web/text_layer_builder.css

@@ -26,6 +26,7 @@
   text-size-adjust: none;
   forced-color-adjust: none;
   transform-origin: 0 0;
+  z-index: 2;
 }
 
 .textLayer span,