web-dev-qa-db-fra.com

css - positionner div au bas de div div

Comment puis-je positionner une div au bas de la div contenant?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

Ce code place le texte "à l'intérieur" au bas de la page.

cssposition
112
nagy.zsolt.hun
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Doit être

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Le positionnement absolu recherche le parent relativement positionné le plus proche dans le DOM. S'il n'est pas défini, il utilise le corps.

130
Karl

Attribuez position:relative à .outside, puis position:absolute; bottom:0; à votre .inside.

Ainsi:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
70
lifetimes

Ajoutez position: relative à .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Les éléments qui sont positionnés relativement sont toujours considérés comme faisant partie du flux normal d'éléments dans le document. En revanche, un élément qui est absolument positionné est retiré du flux et ne prend donc pas de place lors du placement d'autres éléments. L'élément en position absolue est positionné par rapport à l'ancêtre le plus proche. Si un ancêtre positionné n'existe pas, le conteneur initial est utilisé.

Le "conteneur initial" serait <body>, mais l'ajout de ce qui précède rend .outside positionné.

20
Explosion Pills