Ostatnio edytowany:

right

Autor: Virtual Patriot

Opis właściwości right

Za pomocą właściwości right możemy określić rozmiar odległości interesującego nas elementu HTML od prawej krawędzi obszaru pozycjonowania. Mowa tu o elemencie HTML posiadającym każdą inną pozycję tylko nie static.

Wyszczególnienie możliwych obszarów pozycjonowania elementu HTML

  • gdy element HTML posiada pozycję relative, wtedy obszarem pozycjonowania elementu HTML jest obszar wyznaczony przez krawędzie tego elementu HTML
  • gdy element HTML posiada pozycję absolute, wtedy obszarem pozycjonowania elementu HTML jest obszar wyznaczony przez zewnętrzne krawędzie marginesów wewnętrznych najbliższego elementu przodka posiadającego pozycję każdą inną tylko nie static (gdy wspomniany element przodek nie istnieje, wtedy obszarem pozycjonowania elementu HTML jest obszar wyznaczony przez krawędzie okna przeglądarki internetowej)
  • gdy element HTML posiada pozycję fixed, wtedy obszarem pozycjonowania elementu HTML jest obszar wyznaczony przez krawędzie okna przeglądarki internetowej

Dodatkowe techniczne informacje o właściwości right

przeznaczenie

element HTML posiadający każdą inną pozycję tylko nie static

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości right

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości right

auto

Opis

Wartość auto jest domyślną wartością właściwości right.

Domyślnie element HTML nie posiada żadnego nowego (oprócz pierwotnego, wynikającego z posiadanej pozycji) rozmiaru odległości od prawej krawędzi obszaru pozycjonowania.

Przykład

  right:auto;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
div#blok
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#blok" posiadający pozycję "absolute" nie posiada nowego rozmiaru odległości od zewnętrznej krawędzi prawego marginesu wewnętrznego elementu "div#przodek-relative".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #przodek-relative {
        position:relative;
        border:5px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #blok {
        position:absolute;
        padding:1em;
        background-color:rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>

  <body>

    <div id="przodek-relative">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="blok">div#blok</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości right oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar odległości interesującego nas elementu HTML od prawej krawędzi obszaru pozycjonowania.

Wartości dodatnie

wartości dodatnie przesuwają element HTML w lewo od prawej krawędzi obszaru pozycjonowania

Wartości ujemne

wartości ujemne przesuwają element HTML w prawo od prawej krawędzi obszaru pozycjonowania

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru pozycjonowania

Dla zaawansowanych

finalny rozmiar odległości od prawej krawędzi obszaru pozycjonowania elementu HTML posiadającego pozycję absolute lub pozycję fixed jest zawsze dodatkowo powiększony o wartość właściwości margin-right, jaką posiada wspomniany element HTML

gdy do elementu HTML posiadającego pozycję absolute lub pozycję fixed oraz posiadającego właściwość width wraz z wartością auto dodamy właściwość left wraz z wartością różną od wartości auto oraz właściwość right wraz z wartością różną od wartości auto, wtedy wartości wspomnianych właściwości left oraz right określą jak bardzo rozmiar szerokości wspomnianego elementu HTML powinien zostać rozciągnięty względem lewej oraz prawej krawędzi obszaru pozycjonowania (uwzględniając przy tym różnicę wynikającą z posiadania przez wspomniany element HTML właściwości margin-left oraz właściwości margin-right)

Przykład

  right:5px;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
div#blok
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Rozmiar odległości przykładowego elementu "div#blok" posiadającego pozycję "absolute" od zewnętrznej krawędzi prawego marginesu wewnętrznego elementu "div#przodek-relative" wynosi 5 pikseli, ponieważ do wspomnianego elementu "div#blok" została dodana właściwość "right" wraz z wartością "5px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #przodek-relative {
        position:relative;
        border:5px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #blok {
        position:absolute;
        right:5px;
        padding:1em;
        background-color:rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>

  <body>

    <div id="przodek-relative">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="blok">div#blok</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>