Spec-Zone.ru › CSS

Позиционирование якорей CSS

Модуль позиционирования якорей CSS определяет возможности привязки элементов друг к другу. Некоторые элементы определяются как элементы-якоря; элементы, позиционированные относительно якоря, могут затем изменять свой размер и положение на основе размера и местоположения элементов-якорей, к которым они привязаны.

Кроме того, спецификация предоставляет чисто CSS-механизмы для:

  • Указание набора альтернативных позиций для привязанного элемента; когда позиция по умолчанию вызывает переполнение содержащего блока и/или вывод элемента за экран, браузер попытается отобразить привязанный элемент в альтернативных позициях вместо этого.
  • Объявление условий, при которых элементы, позиционированные относительно якоря, должны быть скрыты в ситуациях, когда их привязка к элементам-якорям не уместна.

Справочник

Свойства

  • anchor-name
  • position-anchor
  • position-area
  • position-try-fallbacks
  • position-try-order
  • position-try сокращение
  • position-visibility

Примечание: Модуль позиционирования якорей CSS вводит свойство anchor-scope , которое пока не реализовано.

Правила @ и описатели

  • @position-try

Функции

  • anchor()
  • anchor-size()

Типы данных и значения

  • anchor-center
  • <anchor-side>
  • <anchor-size>
  • <position-area>
  • <try-size>
  • <try-tactic>

Атрибуты HTML

  • anchor Нестандартно

Интерфейсы

  • CSSPositionTryDescriptors
  • CSSPositionTryRule
  • HTMLElement.anchorElement Нестандартно

Руководства

Использование позиционирования якорей CSS

Вводное руководство по основным понятиям позиционирования якорей, включая связывание, позиционирование и размер элементов относительно их якоря.

Обработка переполнения: варианты fallback и условное скрытие

Руководство по механизмам позиционирования якорей CSS для предотвращения переполнения элементов, позиционированных относительно якоря, своих контейнеров или области просмотра, включая варианты fallback позиций и условное скрытие элементов.

Связанные понятия

  • Модуль логических свойств и значений CSS:
    • inset-block-start
    • inset-block-end
    • inset-inline-start
    • inset-inline-end
    • inset-block
    • inset-inline
    • inset сокращение
    • inline-size
    • min-block-size
    • min-inline-size
    • max-block-size
    • max-inline-size
    • Словарь терминов "Свойства отступа"
  • Модуль позиционирования CSS:
    • top
    • left
    • bottom
    • right
  • Модуль CSS-модели бокса:
    • width
    • height
    • min-width
    • min-height
    • max-width
    • max-height
    • block-size
  • Модуль выравнивания блоков CSS:
    • align-items
    • align-self
    • justify-items
    • justify-self
    • place-items
    • place-self

Спецификации

Спецификация
Позиционирование якорей CSS

См. также

  • Урок: Позиционирование в CSS
  • Модуль логических свойств и значений CSS
  • Изменение размеров элементов в CSS

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API