diff --git a/src/main/scss/media-screen.scss b/src/main/scss/media-screen.scss
index b280b3e2e..aee0eecbc 100644
--- a/src/main/scss/media-screen.scss
+++ b/src/main/scss/media-screen.scss
@@ -211,7 +211,11 @@ nav.top {
     width: 100%;
     background-color: var(--nav-background-color);
     opacity: 1;
-    z-index: 100; /* make sure floating elements go under it! */
+    /* N.B. this "makes sure" that floating elments go under it,
+       but it also interacts with the persistent ToC which must
+       go over it. If you're thinking of changing this, think
+       of changing js/persistent-toc.js as well. */
+    z-index: 100;
 }
 
 body.home nav.top {
diff --git a/src/main/web/js/persistent-toc.js b/src/main/web/js/persistent-toc.js
index 5b1badf7e..1bcb528ca 100644
--- a/src/main/web/js/persistent-toc.js
+++ b/src/main/web/js/persistent-toc.js
@@ -319,9 +319,13 @@
   toc.innerHTML = tocScript.innerHTML;
 
   tocOpen.style.display = "inline";
-  tocOpen.style.zIndex = 3;
 
-  toc.style.zIndex = 4;
+  /* N.B. these z-index changes "make sure" that the persistent ToC is visible
+     in the nav bar, but they also interact with the z-index of the nav bar. If
+     you're thinking of changing these, think of changing scss/media-screen.scss
+     as well. */
+  tocOpen.style.zIndex = 101;
+  toc.style.zIndex = 102;
 
   if (window.location.search === "?toc") {
     showToC(null);