why are these nested ol items overlapping each other?

Question

i have what should be a pretty normal nested OL with code basically copypasted from here with some minor additions from this thread here where someone was having a similar problem to me, but no matter what i do, i can't get the list items to stop overlapping. specifically, it shoves all the main list items (1, 2, 3 etc) into one neat and tidy list without any breaks for sublists (1.1, 1.1.1, etc), which do at least show up and are arranged properly but it all just sits on top of each other all weird, example of the weird overlapping

here's the code:

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= -1 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

const handler = (entries) => {
  // Get all the links from the side menu
  const allLinks = document.querySelectorAll("ol li a");

  // Get all the sections we want to track
  const allSections = document.querySelectorAll("h2");

  // Get all entries that have just come into the viewport
  const allEntries = new Set(
    entries
      .filter((entry) => entry.isIntersecting == true)
      .map((entry) => entry.target)
  );

  let currentSection;

  // Look through all sections
  for (let i = 0; i < allSections.length; i++) {
    // Get the current section
    currentSection = allSections[i];
    // If the section is in the viewport or it has just intersected, set it as active
    if (isElementInViewport(currentSection) || allEntries.has(currentSection)) {
      // Set all links as unactive
      allLinks.forEach((link) => link.classList.remove("active"));
      // Set current link to active
      document
        .querySelector(`a[href="#${currentSection.id}"]`)
        .classList.add("active");
      // Exit loop after setting first active link
      break;
    }
  }
};

// Create a new observer with the handler
const observer = new IntersectionObserver(handler);

// Observe all sections that have an `id` applied
document.querySelectorAll("h2").forEach((section) => {
  observer.observe(section);
});

li {
    padding: 10px 10px 10px 10px;
    line-height: 16px; }

a {
 color:#000; }

#toccontain {
 position:fixed;
 left:0px;
 top:0px;
 width:300px;}

section {
  display: flex;}

ol {
  position: fixed;
  width: 10rem;
  counter-reset: item;
  list-style-position: outside;}
ol li {
  display: block;
  clear: left;
  list-style-position: outside;
  list-style-type: lower-alpha;}
ol li:before {
  content: counters(item, ".") " ";
  counter-increment: item;}

a:hover {
  color: green;}

.active {
  color: green;}

<section>
    <div id="toccontain">
    <center>Contents</center>
    <ol>
    
      <li><a href="#intro" style="text-decoration: none;">Introduction</a></li>
      <li><a href="#debut" style="text-decoration: none;">Debut</a>
        <ol>
          <li><a href="#2-1" style="text-decoration: none;">The Targets</a>
            <ol>
              <li><a href="#2-1-1" style="text-decoration: none;">Simone Silvestri</a></li>
              <li><a href="#2-1-2" style="text-decoration: none;">Sean Flynn</a></li>
              <li><a href="#2-1-3" style="text-decoration: none;">Jett Baili</a></li>
            </ol>
          </li>
          <li><a href="#2-2" style="text-decoration: none;">The Crime</a>
            <ol>
              <li><a href="#2-2-1" style="text-decoration: none;">Conditions</a></li>
              <li><a href="#2-2-2" style="text-decoration: none;">Discovery</a></li>
            </ol>
          </li>
          <li><a href="#2-3" style="text-decoration: none;">Investigation</a></li>
        </ol>
      </li>
      <li><a href="#3" style="text-decoration: none;">GFGJGHJ</a>
        <ol>
          <li><a href="#3-1" style="text-decoration: none;">JHKJHK</a></li>
            
          <li><a href="#3-2" style="text-decoration: none;">GGR</a></li>
            
          <li><a href="#3-3" style="text-decoration: none;">IGRGn</a></li>
        </ol>
      </li>
    </ol>
    </div>

</section>

i'll quickly note here that except for the third section all of those subheadings have had their corresponding subheadings in the article set up properly. clicking them to navigate to different headings also still works so long as i can actually click on them, which... i normally can't with the overlapped ones because they're all sitting on top of each other, but the point is that it responds totally normally other than being stacked in one spot

i've tried changing the ol style to inline or inline-block, both of those just break the look of the list and also don't even fix the overlapping problem. i've tried a whole bunch of stuff actually and scrounged around quite a bit looking for answers but no one has the same problem as i'm having and nothing's working right. the part of the script i really NEEDED to use, the way the table of contents highlights what header you're on, works perfectly even with the weird overlapping subheaders (i can see them lighting up green as i scroll through, for example) and i'd really like to keep it but i just can't figure out how to fix the overlap without messing up the script somehow.

trying to separate the ol into a list per heading (eg section 1 is its own individual ol, so is section 2, etc) and resigning myself to manually numbering each item just resulted in all of them piling on top of each other even worse than before, it's incorrigible. i don't know if i broke something somewhere, somehow, or if the original code was just not viable for this to begin with, and i do not know enough about js or how ol/ul works to figure it out

QUICK EDIT FOR POSTERITY: removing "position: fixed" from the css for ol did the trick. can't believe i didn't entirely accidentally try doing that one already!

Answer 1

I have debugged the issue.

ol {
  position: fixed;  // this is causing issue
  counter-reset: item; // this is causing issue
  width: 10rem;
  list-style-position: outside;
}