Autor publikacji: Virtual Patriot - Administrator

left

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - left property (LV3)

Przeznaczenie właściwości `left`

Za pomocą właściwości left możemy określić rozmiar odległości interesującego nas elementu HTML od lewej krawędzi obszaru pozycjonowania.

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, natomiast gdy element HTML jest elementem HTML należącym do siatki elementu HTML tworzącego układ siatki, wtedy obszarem pozycjonowania elementu HTML jest obszar wyznaczony przez krawędzie miejsca, do którego został przypisany (w każdym innym przypadku 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

Informacje dodatkowe: właściwość left ma pierwszeństwo przed właściwością right, lecz tylko wtedy, gdy wartością właściwości width elementu HTML nie jest wartość auto

Informacje techniczne o właściwości `left`

przeznaczenie: element HTML każdego typu
pozycja: relative, absolute, fixed
dziedziczenie: nie
wartość initial: auto
wyjątki initial: brak
animowanie: tak, lecz tylko wartość rozmiar

Interpretacja właściwości `left`

: tak
: tak
: tak
: tak
: tak
: tak

Opis wartości właściwości `left`

auto

Wyjaśnienie

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

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

Przykład

  left: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, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, 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 lewego 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:#7DCDE8;
      }

      #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, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, 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

Wyjaśnienie

Za pomocą właściwości left 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 lewej krawędzi obszaru pozycjonowania.

Wartości dodatnie: wartości dodatnie przesuwają element HTML w prawo od lewej krawędzi obszaru pozycjonowania
Wartości ujemne: wartości ujemne przesuwają element HTML w lewo od lewej krawędzi obszaru pozycjonowania
Wartości procentowe: wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru pozycjonowania
Dla zaawansowanych: 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

Przykład

  left: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

Rozmiar odległości przykładowego elementu "div#blok" posiadającego pozycję "absolute" od zewnętrznej krawędzi lewego marginesu wewnętrznego elementu "div#przodek-relative" wynosi 5 pikseli, ponieważ do wspomnianego elementu "div#blok" została dodana właściwość "left" 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:#7DCDE8;
      }

      #blok {
        position:absolute;
        left: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, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, 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>