Autor publikacji
Virtual Patriot - Administrator

bottom

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości bottom

Za pomocą właściwości bottom możemy określić rozmiar odległości interesującego nas elementu HTML od dolnej 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

brak

Informacje techniczne o właściwości bottom

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 bottom

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

auto

Wyjaśnienie

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

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

Przykład

  bottom: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 dolnego 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 bottom 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 dolnej krawędzi obszaru pozycjonowania.

Wartości dodatnie

wartości dodatnie przesuwają element HTML w górę od dolnej krawędzi obszaru pozycjonowania

Wartości ujemne

wartości ujemne przesuwają element HTML w dół od dolnej krawędzi obszaru pozycjonowania

Wartości procentowe

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

Dla zaawansowanych

gdy do elementu HTML posiadającego pozycję absolute lub pozycję fixed oraz posiadającego właściwość height wraz z wartością auto dodamy właściwość top wraz z wartością różną od wartości auto oraz właściwość bottom wraz z wartością różną od wartości auto, wtedy wartości wspomnianych właściwości top oraz bottom określą jak bardzo rozmiar wysokości wspomnianego elementu HTML powinien zostać rozciągnięty względem górnej oraz dolnej krawędzi obszaru pozycjonowania

Przykład

  bottom: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, 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

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