Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

right

Свойство CSS right используется для указания расстояния смещения влево (или вправо) правого края позиционируемого элемента относительно правого внутреннего края рамки (CSS border) одного из его элементов-предков или окна браузера (абсолютное позиционирование) либо относительно начального положения правого края самого элемента (относительное позиционирование). Это зависит от значения свойства position как самого элемента, так и его предков.

HTML-элементы называются предками для тех тегов, которые находятся внутри них на любом уровне вложенности, а родительскими для тех, которые находятся внутри них на первом уровне. Естественно предки являются одновременно и родительскими элементами для своих потомков первого уровня вложенности (дочерних).

Тип свойства

Назначение: позиционирование.

Применяется: к позиционируемым элементам, то есть тем, у которых свойство CSS position имеет значения absolute, fixed или relative.

Наследуется: нет.

Значения

Значением свойства CSS right является указание расстояния одним из следующих способов:

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

Значение по умолчанию: auto.

Синтаксис

right: размеры | проценты | auto | inherit

Пример CSS: использование right

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство right</title>
  <style type="text/css">
   .div1 {
    width: 90%; /* ширина блока DIV1 */
    height: 3000px; /* его высота */
    background: red; /* красный фон */
    position: relative; /* позиционируем относительно него */
   }
   .div2 {
    width: 80%; /* ширина блока DIV2 */
    height: 80%; /* его высота */
    background: green; /* зеленый фон */
    margin: 0 auto; /* размер полей */
   }
   .div3 {
    width: 200px; /* ширина блока DIV3 */
    color: white; /* цвет текста */
    background: blue; /* синий фон */
    position: absolute; /* абсолютное позиционирование */
    top: 10%; /* расстояние смещения вниз */
    right: 20px; /* расстояние смещения влево */
    bottom: 25%; /* расстояние смещения вверх */
   }
  </style>
 </head>
 <body>
  <div class="div1">
   <div class="div2">
    <div class="div3">
     Абсолютное позиционирование данного блока DIV3
     считается относительно блока DIV1, так как это
     ближайший предок со свойством position не равным static.
    </div>
   </div>
  </div>
 </body>
</html>

Результат примера

В этом примере блок DIV3 не только будет спозиционирован, но и растянется по вертикали. Ведь, во-первых, мы не задали явно его высоту, а, во-вторых, блок DIV1 (относительно которого идет позиционирование) очень высокий, а мы взяли всего 10% смещения вниз и 25% вверх.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit. Internet Explorer 6.0 не изменяет размеры позиционируемого блока при одновременном указании свойств CSS top и bottom или left и right, когда размеры блока не заданы явно.