Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Fixed и sticky positioning/ Смещение и границы sticky box

КатегорияПозиционирование и наложениеНавыкFixed и sticky positioningКомпонент навыка

Смещение и границы sticky box

БазовыйЭкспертный

  1. Базовый уровень

    • Сохранение normal-flow slot

      Сохраняет исходное normal-flow placement и занимаемое sticky box место.

    • Relative-подобное смещение

      Применяет sticky offset как визуальное смещение после обычного layout.

    • Ограничение containing block

      Не позволяет position box выйти за границы containing block.

  2. Продвинутый уровень

    • Условие смещения каждой стороны

      Для каждой стороны требует одновременно non-`auto` inset и выход border edge за соответствующий край view rectangle.

    • Минимальный inward shift

      Сдвигает box внутрь view rectangle только настолько, насколько позволяет containing block.

    • Одностороннее направление движения

      Прогнозирует одностороннее движение при заданном start inset и `auto` end inset.

    • Независимые offsets нескольких boxes

      Вычисляет offsets нескольких sticky boxes независимо.

    • Допустимый overlap sticky boxes

      Допускает overlap нескольких sticky boxes и не вводит отсутствующий collision-avoidance algorithm.

  3. Экспертный уровень

    • Margin box как position box

      Использует margin box как исходный position box sticky элемента.

    • Ограничение margin расстоянием

      Заменяет margin фактическим расстоянием до края containing block, если это расстояние меньше margin.

    • Совместные view и containing-block limits

      Совместно применяет view-rectangle constraint и containing-block constraint по нескольким сторонам.