top, left, right, bottom

Свойства top, left, right и bottom используются для указания точного положения позиционированного элемента.

        
          
          div {  position: fixed;  top: 10px;}
          div {
  position: fixed;
  top: 10px;
}

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

Если у элемента задано свойство position, то ему можно указать точное положение на странице при помощи top, left, right и bottom.

Свойства top, left, right и bottom могут принимать любые допустимые единицы измерения CSS. При указании значения в процентах положение вычисляется от ширины родительского элемента. А также auto и inherit.

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

Например, при таком позиционировании элемент будет сдвинут на 10 px вниз и на 5 px влево:

        
          
          div {  position: absolute;  top: 10px;  left: -5px;}
          div {
  position: absolute;
  top: 10px;
  left: -5px;
}

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

А в данном случае наоборот, сместится на 10 px вверх и на 5 px вправо:

        
          
          div {  position: absolute;  top: -10px;  left: 5px;}
          div {
  position: absolute;
  top: -10px;
  left: 5px;
}

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

Обычно для позиционирования элемента достаточно задать два из четырёх свойств. Приоритет отдаётся свойствам left и top.

Если left и right будут противоречить друг другу, right игнорируется. Но при direction: rtl приоритет будет отдан свойству right. В паре bottom и top то же верно для bottom.

При position: absolute и position: fixed, если их ширина и высота не задана явно и ориентируется на количество контента, можно задать все четыре свойства. Это заставит блок растянуться во всю ширину и высоту родителя или до нужных вам размеров. Все четыре свойства можно задать всего одной строкой при помощи свойства inset.

При position: relative можно задать только одно из пары left/right и top/bottom, второе будет игнорироваться.

При position: static свойства top, left, right и bottom игнорируются всегда.