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

right

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

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

Тип свойства

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

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

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

Значения

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

  • Проценты — значения в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
    1. Для относительно позиционируемых элементов (relative) берется ширина ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то ширина тела документа (тег <BODY>).
    2. Для фиксированных абсолютно позиционированных элементов (fixed) берется ширина окна браузера.
    3. Для абсолютно позиционированных элементов (absolute) берется ширина элемента относительно которого происходит позиционирование с учетом его внутренних отступов (CSS padding), а если такого нет, то ширина окна браузера.
    Разрешено указывать отрицательные процентные значения (-20%).
  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них также разрешены отрицательные значения.
  • auto — положение правого края элемента по горизонтали, как без применения позиционирования.
  • inherit — наследует значение 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, когда размеры блока не заданы явно.

CSS по алфавиту
CSS по назначению