(CSS) Façons de lier l'élément au fond?

Question

Y at-il un autre moyen de mettre un élément HTML au fond, sauf:

position: absolute; 
bottom: 0; 

et à l'élément parent:

position: relative 

... ou le réglage de la marge pour que l'élément correspond exactement au fond?

Answer 1

Eh bien, vous pouvez également utiliser position: fixed; bottom: 0;, qui va coller l'élément au bas de la fenêtre. Cela signifie qu'il ne défilera même pas avec le reste de la page. Lorsque vous utilisez ce paramètre pour un pied de page pleine largeur ou similaire (le cas d'utilisation le plus probable), vous devez ensuite ajouter une marge au reste du contenu de la page afin qu'il ne soit pas caché derrière. (ou cachez) le pied de page. À part cela, vous êtes plutôt bloqué avec les options que vous avez mentionnées.

Une documentation complète sur la position propriété se trouvent ici: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

Vous pouvez également utiliser position: fixed

.elem { 
    position: fixed; 
    bottom: 0; 
} 

Ou vous pouvez utiliser Flex puis définissez votre élément align-self: flex-end

par exemple

.container { 
    height: 150px; 
    width: 150px; 
    display: flex; 
    display: -webkit-flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    border: 1px solid red; 
} 

.container div { 
    -webkit-align-self: flex-end; 
    align-self: flex-end 
} 

Fiddle