Attribut BOTTOM
Rôle
L’attribut bottom permet de positionner, à partir du bas, un élément qui échappe au flux HTML (disposition par défaut des éléments). Il peut être conjointement utilisé avec 3 autres attributs : left (à partir de la gauche), right (à partir de la droite), top (à partir du haut).
Si la valeur de l’attribut position est « absolute », le bas correspond au bord inférieur du premier élément parent qui est aussi en position, ou le cas échéant, du bord inférieur de la fenêtre du navigateur.
Si la valeur de l’attribut position est « fixed », le bas correspond au bord inférieur de la fenêtre du navigateur.
Si la valeur de l’attribut position est « relative », le bas correspond au bord inférieur de l’élément lui-même.
Version : CSS2
Héritage (inherit) : non
Propriété Javascript : element.style.bottom
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
#ct{
width: 300px;
height: 200px;
border: thin solid red ;
position : relative;
}
#droite{
background-color: orange;
border: thin solid blue ;
position: absolute;
width: 100px;
margin: 10px;
bottom: 0;
right: 0;
}
– Le code HTML
<div id="ct"> <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p> <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p> <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p> <div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div>
Résultat
Le référentiel bottom du bloc en position « absolute » (bordure bleu) est le bord inférieur du bloc en position relative (bordure rouge).
Compatibilité
L’attribut bottom est pris en charge par tous les principaux navigateurs
Valeurs
Les différentes valeurs de l’attribut bottom sont:
- auto
- Le navigateur calcule la position .
Syntaxe :
bottom : auto - length
- Définit une valeur en px, pt, cm, em.
Syntaxe :
bottom : 20px - pourcentage
- Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
bottom : 30% - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
bottom : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
bottom : inherit
A voir aussi
display– clear– z-index– flex– align-content– align-items– align-self– columns– vertical-align
