---
title: right
slug: Web/CSS/right
translation_of: Web/CSS/right
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Özet</h2>

<p>Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.</p>

<p>{{Cssxref("position")}}<code>:</code> <code>absolute</code> or <code>position:</code> <code>fixed</code> olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.</p>

<p><code>right</code> değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.</p>

<p>Hem <code>right</code> hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise <code>right</code> değeri geçerli kabul edilir. Soldan sağa yerleşimlerde <code>right</code> değeri <code>-left</code>, sağdan sola yerleşimlerde <code>left</code> değeri -<code>right</code> olarak tekrar hesaplanır.</p>

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

<h2 id="Syntax" name="Syntax">Yazım</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("right")}}
</pre>

<pre>right: 3px         /* &lt;uzunluk&gt; değeri */
right: 2.4em

right: 10%         /* barındıran bloğun yüzdesi olarak */

right: auto

right: inherit
</pre>

<h3 id="Values" name="Values">Değerler</h3>

<dl>
 <dt><code>&lt;uzunluk&gt;</code></dt>
 <dd>Negatif, null veya pozitif {{cssxref("&lt;length&gt;")}} değerdir.
 <ul>
  <li>Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;</li>
  <li>Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.</li>
 </ul>
 </dd>
 <dt><code>&lt;yüzde&gt;</code></dt>
 <dd>Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("&lt;percentage&gt;")}}. </dd>
 <dt><code>auto</code></dt>
 <dd>Is a keyword that represents:
 <ul>
  <li>for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat <code>width: auto</code> as a width based on the content.</li>
  <li>for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if <code>left</code> is also <code>auto</code>, do not offset it at all.</li>
 </ul>
 </dd>
 <dt><code>inherit</code></dt>
 <dd>Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} or the <code>auto</code> keyword.</dd>
</dl>

<h2 id="Examples" name="Examples">Examples</h2>


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

#example_4 {
  width:200px;
  height:200px;
  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>{{LiveSampleLink('Examples', 'Example Demo Link')}}</p>

<h2 id="Specifications" name="Specifications">Specifications</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('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>5.5</td>
   <td>5.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>