---
title: right
slug: Web/CSS/right
tags:
  - CSS
  - CSS Позиционирование
  - CSS свойство
translation_of: Web/CSS/right
---
<div>{{CSSRef}}</div>

<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>right</code></strong> частично определяет горизонтальное положение позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>right</code></strong> не применится, если задано <code>position: static</code>).</p>

<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>

<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>

<p>Эффект свойства <code>right</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>

<ul>
 <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — свойство <code>right</code> устанавливает расстояние между правым краем элемента и правым краем содержащего его блока.</li>
 <li>Когда задано <code>position: relative</code> — свойство <code>right</code> устанавливает расстояние, на которое правый край элемента перемещается влево от его обычной позиции.</li>
 <li>Когда задано <code>position: sticky</code> — свойство <code>right</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
 <li>Когда задано <code>position: static</code> — свойство <code>right</code> <em>не имеет никакого эффекта</em>.</li>
</ul>

<p>Когда заданы оба свойства {{cssxref("left")}} и <code>right</code>, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента is<em> overspecified</em>. В этом случае значение <code>left</code> имеет приоритет, when the container is left-to-right; и наоборот, значение <code>right</code> имеет приоритет,  when the container is right-to-left.</p>

<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>

<pre class="brush:css no-line-numbers">/* Значения величин */
right: 3px;
right: 2.4em;

/* Процентные значения от высоты родительского блока */
right: 10%;

/* Ключевое слово */
right: auto;

/* Глобальные значения */
right: inherit;
right: initial;
right: unset;
</pre>

<h3 id="Значения">Значения</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Отрицательная, нулевая или положительная величина, которая представляет:
 <ul>
  <li>for <em>absolutely positioned elements</em>, the distance to the right edge of the containing block.</li>
  <li>for <em>relatively positioned elements</em>, the distance that the element is moved to the left of its normal position.</li>
 </ul>
 </dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>A {{cssxref("&lt;percentage&gt;")}} of the containing block's width.</dd>
 <dt><code>auto</code></dt>
 <dd>Specifies that:
 <ul>
  <li>for <em>absolutely positioned elements</em>, the position of the element is based on the {{Cssxref("left")}} property, while <code>width: auto</code> is treated as a width based on the content; or if <code>left</code> is also <code>auto</code>, the element is positioned where it should horizontally be positioned if it were a static element.</li>
  <li>for <em>relatively positioned elements</em>, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if <code>left</code> is also <code>auto</code>, the element is not moved horizontally at all.</li>
 </ul>
 </dd>
 <dt><code>inherit</code></dt>
 <dd>Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, or the <code>auto</code> keyword.</dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Примеры" name="Примеры">Примеры</h2>

<pre class="brush: css; highlight:[16]">#example_3 {
  width: 100px;
  height: 100px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example_4 {
  width: 100px;
  height: 100px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}</pre>

<pre class="brush: html">&lt;div id="example_3"&gt;Example 3&lt;/div&gt;
&lt;div id="example_4"&gt;Example 4&lt;/div&gt;
</pre>

<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p>

<h2 id="Спецификации" name="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>right</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td>Adds behavior for sticky positioning.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("css.properties.right")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li>
</ul>