Почему эти вложенные элементы перекрывают друг друга? ⇐ CSS

[Anonymous]

У меня есть вполне нормальный вложенный OL с кодом, в основном скопированным отсюда с некоторыми незначительными дополнениями из этой темы, где у кого-то возникла проблема, аналогичная моей, но что бы я ни делал, я не могу получить элементы списка, чтобы избежать перекрытия. в частности, он помещает все основные элементы списка (1, 2, 3 и т. д.) в один аккуратный список без каких-либо разрывов на подсписки (1.1, 1.1.1 и т. д.), которые, по крайней мере, отображаются и организованы правильно, но это все просто сидит друг на друге, все странно, пример странного перекрытия

вот код:

function isElementInViewport(el) { var rect = el.getBoundingClientRect(); возвращаться ( rect.top >= -1 && прямоугольный левый >= 0 && прямоугольник.дно вход.isIntersecting == true) .map((запись) => запись.цель) ); пусть currentSection; // Просматриваем все разделы for (let i = 0; i < allSections.length; i++) { // Получаем текущий раздел currentSection = allSections; // Если сечение находится во вьюпорте или оно только что пересеклось, устанавливаем его активным if (isElementInViewport(currentSection) || allEntries.has(currentSection)) { // Делаем все ссылки неактивными allLinks.forEach((ссылка) => link.classList.remove("активный")); // Делаем текущую ссылку активной документ .querySelector(`a[href="#${currentSection.id}"]`) .classList.add("активный"); // Выход из цикла после установки первой активной ссылки перерыв; } } }; // Создаём нового наблюдателя с обработчиком константный наблюдатель = новый IntersectionObserver (обработчик); // Просмотрите все разделы, к которым применен `id` document.querySelectorAll("h2").forEach((section) => { наблюдатель.наблюдать(раздел); }); li { отступ: 10 пикселей 10 пикселей 10 пикселей 10 пикселей; высота строки: 16 пикселей; } а { цвет:#000; } #toccontain { положение: фиксированное; слева: 0 пикселей; верх: 0 пикселей; ширина: 300 пикселей;} раздел { дисплей: гибкий;} ол { положение: фиксированное; ширина: 10рем; счетчик-сброс: элемент; позиция в стиле списка: снаружи;} ол ли { дисплей: блок; ясно: слева; позиция в стиле списка: снаружи; тип списка-стиля: нижняя альфа;} Ол Ли:до { содержимое: счетчики(пункт, ".") " "; встречный инкремент: элемент;} а: наведите { цвет: зеленый;} .активный { цвет: зеленый; Содержимое [*]Введение [*]Дебют Цели Симона Сильвестри [*]Шон Флинн [*]Джетт Бэйли [*]Преступление Условия [*]Открытие [*]Расследование [*]GFGJGHJ JHKJHK [*]GGR [*]IGRGn

Я сразу отмечу, что, за исключением третьего раздела, для всех этих подзаголовков соответствующие подзаголовки в статье настроены правильно. нажатие на них для перехода к разным заголовкам также работает, пока я могу нажимать на них, что... я обычно не могу с перекрывающимися, потому что они все сидят друг на друге, но дело в том, что он реагирует совершенно нормально, за исключением того, что они сложены в одном месте

Я пробовал изменить стиль «ol» на «inline» или «inline-block», но оба они только портят внешний вид списка и даже не решают проблему перекрытия. На самом деле я перепробовал кучу всего и немало покопался в поисках ответов, но ни у кого не было такой же проблемы, как у меня, и ничего не работает правильно. та часть сценария, которую мне действительно НУЖНО использовать, то, как оглавление показывает, какой заголовок вы используете, отлично работает даже со странными перекрывающимися подзаголовками (например, я вижу, как они подсвечиваются зеленым при прокрутке) и мне бы очень хотелось сохранить его, но я просто не могу понять, как исправить перекрытие, не испортив при этом сценарий.

Попытка разделить список на список по каждому заголовку (например, раздел 1 является отдельным разделом, как и раздел 2 и т. д.) и смирилась с ручной нумерацией каждого элемента, но все это привело к тому, что все они навалились друг на друга. еще хуже, чем прежде, это неисправимо. я не знаю, сломал ли я что-то где-то или каким-то образом, или исходный код был просто нежизнеспособен для этого, и я недостаточно знаю о js или о том, как работает ol/ul, чтобы понять это

БЫСТРОЕ РЕДАКТИРОВАНИЕ ДЛЯ ПОТОМ: удаление «position: fixed» из CSS для ol помогло. не могу поверить, что я уже совершенно случайно не попробовал это сделать!