为什么这些嵌套的 ol 项目彼此重叠？

Question

我有一个应该是一个非常正常的嵌套OL，代码基本上是从here复制粘贴的，并从这个线程here添加了一些小内容，其中有人遇到了与我类似的问题，但无论我做什么，我都不能使列表项停止重叠。具体来说，它将所有主列表项（1、2、3 等）推入一个整洁的列表中，子列表（1.1、1.1.1 等）没有任何中断，这些子列表至少会显示并正确排列，但它所有的东西都叠在一起，很奇怪，

这是代码：

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>

我很快就会注意到，除了第三部分之外，所有这些小标题都在文章中正确设置了相应的小标题。单击它们导航到不同的标题也仍然有效，只要我实际上可以单击它们，这......我通常不能使用重叠的标题，因为它们都坐在彼此的顶部，但重点是除了堆放在一个地方之外，它的反应完全正常

我尝试将 ol 样式更改为 inline 或 inline-block，这两种方式都破坏了列表的外观，甚至没有解决重叠问题。我实际上已经尝试了一大堆东西，并四处寻找答案，但没有人遇到与我相同的问题，而且没有任何效果。我真正需要使用的脚本部分，即目录突出显示您所在标题的方式，即使在奇怪的重叠子标题下也能完美工作（例如，当我滚动浏览时，我可以看到它们亮起绿色）并且我真的很想保留它，但我就是不知道如何修复重叠而不以某种方式弄乱脚本。

尝试将 ol 分成每个标题的列表（例如，第 1 节是其自己的单独 ol，第 2 节也是如此），并让自己手动对每个项目编号，结果导致所有项目都堆积在一起，甚至更糟与以前相比，已经无可救药了。我不知道我是否在某个地方以某种方式破坏了某些东西，或者原始代码是否一开始就不可行，而且我对 js 或 ol/ul 的工作原理了解不够，无法弄清楚它

为后人快速编辑：从 ol 的 CSS 中删除“position:fixed”就可以了。不敢相信我已经完全不小心尝试这样做了！

Answer 1

我已经调试了这个问题。

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