right

Özet

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

position: absolute or position: fixed olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.

right değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.

Hem right hem de 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 left değeri, sağdan sola ise right değeri geçerli kabul edilir. Soldan sağa yerleşimlerde right değeri -left, sağdan sola yerleşimlerde left değeri -right olarak tekrar hesaplanır.

Yazım

Formal syntax: <length> | <percentage> | auto

right: 3px         /* <uzunluk> değeri */
right: 2.4em

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

right: auto

right: inherit

Değerler

<uzunluk>

Negatif, null veya pozitif <length> değerdir.

• Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;
• 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.

<yüzde>

Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. <percentage>. 

auto

Is a keyword that represents:

• for absolutely positioned elements, the position the element based on the left property and treat width: auto as a width based on the content.
• for relatively positioned elements, the right offset the element from its original position based on the left property, or if left is also auto, do not offset it at all.

inherit

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 <length>, <percentage> or the auto keyword.

Examples

#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;
}

 <div id="example_3">Example 3</div>
 <div id="example_4">Example 4</div>

Example Demo Link

Specifications

Browser compatibility