Fix table of contents sidebar overlapping with EthicalAds placement

[laymonage]

Fixes #293.

Demo

Before

Screen.Recording.2024-10-29.at.10.22.17.mov

After

Screen.Recording.2024-10-29.at.10.20.50.mov

Issue recap

EthicalAds placement is done with the following CSS:

[data-ea-style=stickybox].loaded {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}

Meanwhile, our sidebars use Bootstrap's sticky-top class that applies the following:

@supports (position: sticky) {
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

There are a few ways we could go about this.

1. Change the z-index of the sticky-top class from Bootstrap, that we use for both sidebars.
2. Add styles for [data-ea-style=stickybox].loaded. This seems brittle.
3. Use our own CSS to apply the stickiness. For example, with the following CSS:

   .sticky {
     position: sticky;
     top: 0;
     z-index: 20;
   }

   And then use it in the following places:

   sphinx-wagtail-theme/sphinx_wagtail_theme/layout.html

   Line 114 in 25ccf64

   <div id="collapseSidebar" class="collapse sticky-top d-lg-block pt-5 pr-lg-4">

   sphinx-wagtail-theme/sphinx_wagtail_theme/layout.html

   Line 156 in 25ccf64

   <div class="sticky-top toc page-toc" aria-labelledby="page-toc-heading">

This PR uses approach 1. I changed all of the z-index values and not just the sticky one, because Bootstrap's docs says the following:

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

I'm not sure of the implications this may have though, but from what I can tell our theme doesn't use dropdowns, fixed, modals, popovers, or tooltips.

[laymonage]

Bootstrap's docs says the following:

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.