position-area

Свойство position-area предоставляет удобную концепцию на основе сетки для позиционирования относительного якорного элемента.

        
          
          .target {  position-area: top;}
          .target {
  position-area: top;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство position-anchor принимает в себя значение из двух ключевых слов: одно для расположения по горизонтальной оси, второе по вертикальной.

Например, запись

        
          
          .target {  position-area: top center;}
          .target {
  position-area: top center;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

расположит элемент сверху по центру:

Если нужно чтобы элемент мог занимать площадь двух ячеек нужно использовать span значение. Например, span-left.

        
          
          .target {  position-area: top span-left;}
          .target {
  position-area: top span-left;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А если хочется растянуть элемент на все три ячейки – в этом поможет значение span-all.

        
          
          .target {  position-area: top span-all;}
          .target {
  position-area: top span-all;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При этом span-all можно опустить, так как оно применяется по умолчанию.

        
          
          .target {  position-area: top;}
          .target {
  position-area: top;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Важно помнить, что элемент растянется на все три ячейки, только если у него будет достаточно для этого ширины. Значение span-all само по себе не увеличит ширину таргет элемента.

Обычно нам нужно разместить таргет элемент относительно якоря в "стандартных" позициях: сверху по центру, сверху слева и т.д.

Для этого можно использовать функцию anchor().

Например, вот так можем расположить элемент сверху слева относительно якоря:

        
          
          .target {  /* располагаем элемент сверху слева относительно якоря */  bottom: anchor(top);  left: anchor(right);}
          .target {
  /* располагаем элемент сверху слева относительно якоря */
  bottom: anchor(top);
  left: anchor(right);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если нам нужно расположить элемент по центру одной из осей, можем использовать связку из функции anchor() и значения anchor-center для свойств justify-self, align-self:

        
          
          .target {  /* располагаем элемент сверху по центру относительно якоря */  bottom: anchor(top);  justify-self: anchor-center;}
          .target {
  /* располагаем элемент сверху по центру относительно якоря */
  bottom: anchor(top);
  justify-self: anchor-center;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В обоих случаях нам потребовалось использовать два свойства, чтобы расположить элемент в нужном месте. Не очень удобно. Чтобы решить эту проблему было создано свойство position-area. С помощью него можно расположить таргет элемент относительно якоря используя концепцию сетки.

Если визуально отобразить границы вьюпорта синим бордером, а затем провести воображаемые линии сверху, снизу, справа и слева от якорного элемента, получим сетку размера 3x3. Чтобы расположить элемент в определенной ячейке, нужно к ней обратиться с помощью ключевых слов top, bottom, right, left, center или их логических эквивалентов (start, center, end).

Лучше понять, какое значение прописать для свойства, чтобы расположить его в нужной месте поможет интерективная демка ниже. В ней можно кликать на любую из ячеек, чтобы выбрать одну ячейку. Также зажать и тянуть, чтобы выбрать несколько ячеек.