CSS onderkant eigenschap

Definitie en gebruik

De bottom-eigenschap definieert de ondersteunende rand van het element. Deze eigenschap definieert de afstand tussen de ondersteunende marginaalrand van het geplaatste element en de ondersteunende rand van het omvattende blok.

Opmerking:Als de waarde van het "position"-attribuut "static" is, heeft het instellen van de "bottom"-eigenschap geen effect.

Beschrijving

Voor static-elementen is het auto; voor lengtewaarden is het de bijbehorende absolute lengte; voor percentage-waarden is het de gespecificeerde waarde; anders is het auto.

Voor relatief gedefinieerde elementen, als zowel bottom als top auto zijn, zijn hun berekende waarden beide 0; als er een van auto is, wordt de tegengestelde waarde van de andere genomen; als beide niet auto zijn, wordt bottom de tegengestelde waarde van top.

Zie ook:

CSS handleiding:CSS positionering

HTML DOM referentiehandleiding:bottom-eigenschap

Voorbeeld

Stel de ondersteunende rand van het beeld in op 5 pixels hoger dan de ondersteunende rand van het omvattende element:

img
  {
  position:absolute;
  bottom:5px;
  }

Probeer het zelf

CSS syntaxis

bottom: auto|length|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. De positie van de onderkant wordt berekend door de browser.
% Stel de ondersteunde positie van het element in als percentage van de breedte van het element. Negatieve waarden kunnen worden gebruikt.
length Stel de ondersteunde positie van het element in met eenheid zoals px, cm, etc. Negatieve waarden kunnen worden gebruikt.
inherit Stelt dat de waarde van de bottom-eigenschap van het element moet worden geërfd van het ouderlijke element.

Technische details

Standaardwaarde: auto
Inheritantie: nee
Versie: CSS2
JavaScript syntaxis: object.style.bottom="50px"

Meer voorbeelden

Instellen van de ondersteunende rand van een afbeelding met pixelwaarden
Dit voorbeeld demonstreert hoe je de ondersteunende rand van een afbeelding instelt met pixelwaarden.
Instellen van de ondersteunende rand van een afbeelding met percentage
Dit voorbeeld demonstreert hoe je de ondersteunende rand van een afbeelding instelt met percentage.

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0