Требование position-relative для обёртки при использовании публичного редактора SIMAI.

При работе с публичным редактором (оверлеи редактирования через Block\Edit) контейнер элемента, к которому подключено редактирование, обязательно должен иметь класс position-relative. Если это условие не выполнить, оверлей редактирования будет рассчитывать позицию от других элементов и отображаться некорректно.

Почему это важно

Методы вида:

• Block\Edit::addEditSectionArea($sectionId)
• Block\Edit::addEditItemArea($itemId)
• Block\Edit::addNewItemArea($iblockId, ...)

возвращают HTML-блок, который выглядит примерно так:

<div data-iblock-edit-item data-item-id="..." class="position-absolute w-100 h-100" style="top:0; left:0; z-index:60">
    <!-- кнопки добавления/редактирования/удаления -->
</div>

То есть оверлей позиционируется абсолютно и растягивается на всю ширину/высоту родителя. Чтобы он "накрыл" именно нужный элемент (раздел, пункт меню, карточку и т.п.), родитель обязан иметь относительное позиционирование.

Если position-relative не задано:

• оверлей может сместиться и перекрывать соседние элементы;
• может накладываться не на тот блок;
• может перекрывать кликабельные ссылки в других местах;
• визуально создаётся ощущение, что "редактор работает некорректно".

Правильный шаблон для разделов (sf.iblock.section)

Пример корректной интеграции в шаблоне, работающем с разделами:

<li class=" position-relative" id="<?= $this->GetEditAreaId($arSection['ID']) ?>">

    <?= Block\Edit::addEditSectionArea($arSection["ID"]); ?>

    <a href="<?= $arSection["SECTION_PAGE_URL"] ?>">
        <?= $arSection["NAME"] ?>
    </a>
</li>
    

Ключевые моменты:

1. На обертку (<li> или <div>) добавлен класс position-relative.
2. Вставка Block\Edit::addEditSectionArea() идёт внутри этой обёртки.
3. Основной контент (ссылки, текст, картинка) остаётся под оверлеем.

Где это нужно учитывать

Добавляйте position-relative на обёртку, если внутри:

• используется любой метод Block\Edit::add*Area(...);
• предполагается отображение оверлея публичного редактора.

Типичные места:

• пункты меню <li> в списках разделов;
• карточки элементов (<div class="card ...">);
• любые блоки, для которых включено редактирование из публичной части.

Заключение