Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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ątkowaauto
Stosowana dopositioned elements
Dziedziczonano
Percentagesrefer to the height of the containing block
Mediavisual
Wartość wyliczonaif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animatableyes, 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 orderthe 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" 
   "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>

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-topnieauto (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

Browser compatibility

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.

Autorzy i etykiety dokumentu

 Autorzy tej strony: fscholz, teoli, Witia, Mgjbot, Ptak82
 Ostatnia aktualizacja: fscholz,