1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
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 /* <uzunluk> 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><uzunluk></code></dt>
<dd>Negatif, null veya pozitif {{cssxref("<length>")}} 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><yüzde></code></dt>
<dd>Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. </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("<length>")}}, {{cssxref("<percentage>")}} 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"> <div id="example_3">Example 3</div>
<div id="example_4">Example 4</div>
</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>
|
