bottom

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.

Wartość początkowa	`auto`
Stosowana do	positioned elements
Dziedziczona	no
Percentages	refer to the height of the containing block
Media	visual
Wartość wyliczona	if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
Animatable	yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	the unique non-ambiguous order defined by the formal grammar

Składnia

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

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.

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" 
   "https://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>

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-topnie są auto (co jest domyślną wartością dla top oraz height).

Specifications

Specification	Status	Comment
CSS Level 2 (Revision 1) The definition of 'bottom' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.7 or earlier)	5^[1]	6	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1.9.2)	?	?	?

[1] In Internet Explorer versions before 7.0, when both top and bottom are specified, the element position is over-constrained and the top property has precedence. In that case the computed value of bottom is set to -top, while its specified value is ignored.