Skip to main content

Visit Mozilla.org

CSS:bottom

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

« Dokumentacja CSS

[edytuj] Podsumowanie

Właściwość bottom określa część pozycji elementu pozycjonowanego.

Dla elementów pozycjonowanych absolutnie (tych z position: absolute lub position: fixed) określa odległość między dolnym marginesem krawędzi elementu a dolną krawędzią zawierającego go bloku.

Dla elementów pozycjonowanych relatywnie (tych z position: relative) określa wartość, o jaką element jest przesunięty powyżej jego normalnej pozycji. Jednak własność top unieważnia własność bottom, zatem, jeśli top nie jest ustawione na auto, wartość wyliczona bottom jest ujemną wartością wyliczoną top.

[edytuj] Składnia 

   bottom: <length> | <percentage> | auto | inherit

[edytuj] Wartości

<length> 
Długość, używana jak w opisano w podsumowaniu. Może mieć wartość ujemną, zero lub dodatnią.
<percentage> 
Procenty wysokości zawierającego bloku, używane jak opisano w podsumowaniu.
auto 
Dla elementów pozycjonowanych absolutnie pozycja elementu oparta jest na własności top i przyjmuje height: auto jako wysokość bazującą na zawartości. Dla elementów pozycjonowanych relatywnie przesunięcie elementu z jego oryginalnej pozycji w oparciu o własność top lub, jeśli top jest również ustawione na auto, nie przesuwa wcale.
inherit 
Dziedziczy wartość wyliczoną od elementu rodzica (który może nie być zawierającym go blokiem). Ta wartość wyliczona jest wtedy traktowana jak to było 'z <length>, <percentage> lub auto.

[edytuj] Przykłady 

element { 
    position: absolute;
    bottom: 20px; 
    height: 200px;
    border: 1px solid #000;
}

Poniższa przykładowa strona porównuje position:absolute z position:fixed. Kiedy normalny tekst staje się wyższy niż wyświetlana część strony (obszar okna przeglądarki), elementy blokowe pozycjonowane przy użyciu position:absolute przesuwają się razem ze stroną, podczas, gdy elementy blokowe pozycjonowane przy użyciu position:fixed nie przesuwają się. Zauważ, że IE6 nie wspiera position:fixed. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Position at bottom, absolute or fixed</title>
<style type="text/css">
p {font-size:30px; line-height:3em;}
div.pos {width:49%; text-align:center; border:2px solid #00f;}
div#abs {position:absolute; bottom:0; left:0;}
div#fix {position:fixed; bottom:0; right:0;}
</style>
</head>
<body>
  <p>This<br>is<br>some<br>tall,<br>tall,
    <br>tall,<br>tall,<br>tall<br>content.</p>
  <div id="fix" class="pos"><p>Fixed</p></div>
  <div id="abs" class="pos"><p>Absolute</p></div>
</body>
</html>

[edytuj] Notatki

Dla elementów pozycjonowanych absolutnie, których zawierający je blok jest oparty na elemencie blokowym, ta własność jest przesunięciem względem krawędzi dopełnienia tego elementu.

Dla elementów pozycjonowanych absolutnie własność bottom nie ma widocznych efektów, jeśli wszystkie wartości top, height i margin-top nie są auto (co jest domyślną wartością dla top oraz height).

[edytuj] Specyfikacje

[edytuj] Zgodność z przeglądarką

Przeglądarka Najniższa wersja
Internet Explorer 5
Firefox 1
Netscape 6
Opera 6


[edytuj] Zobacz także

position, top, right, bottom, left,

Źródło: "http://developer.mozilla.org/pl/docs/CSS:bottom"