develop a system for avoiding z-index problems

customize.dist/src/less/cryptpad.less

@@ -296,7 +296,7 @@ noscript {
         left: 0;
         bottom: 0;
         right: 0;
-        z-index: 2;
+        z-index: 2; // noscriptContainer
         #noscript {
             width: 1000px;
             display: flex;
@@ -341,7 +341,7 @@ noscript {
     left: 0;
     right: 0;
     margin: auto;
-    z-index: 1;
+    z-index: 1; // #main, #main_other
 
     font-size: medium;
 
@@ -607,7 +607,7 @@ noscript {
             background: blue;
             position: absolute;
             left: 0;
-            z-index:1;
+            z-index:1; // .usage
             &.normal {
                 background: @toolbar-green;
             }
@@ -622,7 +622,7 @@ noscript {
             position: relative;
             color: black;
             text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
-            z-index: 2;
+            z-index: 2; // .usageText
             font-size: @main-font-size;
             font-weight: bold;
         }
@@ -644,7 +644,7 @@ noscript {
     bottom: 10vh;
     opacity: 0.9;
     box-sizing: border-box;
-    z-index: 10000;
+    z-index: 10000; // #uploadStatusContainer
     display: none;
     #uploadStatus {
         width: 80vw;
@@ -674,7 +674,7 @@ noscript {
             left: @upload_pad_v;
             top: @upload_pad_h; bottom: @upload_pad_h;
             background-color: rgba(0,0,255,0.3);
-            z-index: -1;
+            z-index: -1; // .progressContainer
         }
         .upCancel { text-align: center; }
         .fa.cancel {

customize.dist/src/less/loading.less

@@ -3,7 +3,7 @@
 
 #loading {
     position: fixed;
-    z-index: 9999999;
+    z-index: 10000000; // #loading
     top: 0px;
     bottom: 0px;
     left: 0px;
@@ -35,7 +35,7 @@
 }
 #loadingTip {
     position: fixed;
-    z-index: 99999;
+    z-index: 100000; // loading tip
     top: 80%;
     left: 0;
     right: 0;

customize.dist/src/less/toolbar.less

@@ -259,7 +259,7 @@ body .cryptpad-toolbar {
 
     font: @toolbar-button-font;
     width: 100%;
-    z-index: 9001;
+    z-index: 10000; // body, .cryptpad-toolbar
 
     .cp-dropdown-container {
         //height: 100%;
@@ -792,7 +792,7 @@ body .cryptpad-toolbar {
             cursor: pointer;
         }
         .cryptpad-user-dropdown {
-            z-index: 10000;
+            z-index: 10000; // .cryptpad-user-dropdown
             //margin-left: 20px;
             height: 64px;
             width: 64px;
@@ -915,7 +915,7 @@ body .cryptpad-toolbar {
         background: @dropdown-bg;
         display: flex;
         flex-flow: column;
-        z-index:10000;
+        z-index:10000; // .drawer-content
         color: black;
         .fa {
             font-size: 17px;

customize.dist/src/less2/include/alertify.less

@@ -64,7 +64,7 @@
         bottom: 0;
         width: 100%;
         height: 100%;
-        z-index: 99999; // alertify container
+        z-index: 100000; // alertify container
         &.forefront {
             z-index: @max-z-index; // alertify max forefront
         }

customize.dist/src/less2/include/dropdown.less

@@ -28,7 +28,7 @@
             background-color: @colortheme_dropdown-bg;
             min-width: 250px;
             box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
-            z-index: 1000;
+            z-index: 1000; //Z dropdown content
             max-height: 300px;
             overflow-y: auto;
             font: @dropdown_font;

customize.dist/src/less2/include/fileupload.less

@@ -10,7 +10,7 @@
         bottom: 10vh;
         opacity: 0.9;
         box-sizing: border-box;
-        z-index: 1000000;
+        z-index: 1000000; //Z file upload table container
         display: none;
         #cp-fileupload-table {
             width: 80vw;
@@ -40,7 +40,7 @@
                 left: @upload_pad_v;
                 top: @upload_pad_h; bottom: @upload_pad_h;
                 background-color: rgba(0,0,255,0.3);
-                z-index: -1;
+                z-index: -1; //Z file upload progress container
             }
             .cp-fileupload-table-cancel { text-align: center; }
             .fa.cancel {

customize.dist/src/less2/include/infopages.less

@@ -117,7 +117,7 @@
 .infopages_topbar () {
     .cp-topbar {
         background: #fff;
-        z-index: 9001;
+        z-index: 10000; //Z infopage toolbar
         position: fixed;
         top: 0;
         display: flex;

customize.dist/src/less2/include/modal.less

@@ -20,7 +20,7 @@
 .cp-modal-container {
     display: none;
 
-    z-index: 100000;
+    z-index: 100000; //Z modal container
     position: absolute;
     top: 0;
     bottom: 0;

customize.dist/src/less2/include/toolbar.less

@@ -274,7 +274,7 @@
 
         font: @toolbar_button-font;
         width: 100%;
-        z-index: 9001;
+        z-index: 10000; // cp-toolbar
 
         .cp-dropdown-container {
             //height: 100%;
@@ -597,7 +597,7 @@
                 vertical-align: top;
             }
             .cp-toolbar-user-dropdown {
-                z-index: 10000;
+                z-index: 10000; //Z cp-toolbar-user-dropdown
                 //margin-left: 20px;
                 height: 64px;
                 width: 64px;
@@ -737,7 +737,7 @@
             background: @colortheme_dropdown-bg;
             display: flex;
             flex-flow: column;
-            z-index:10000;
+            z-index:10000; //Z cp-toolbar-drawer-content
             color: black;
             .fa {
                 font-size: 17px;