Come posso posizionare un div in fondo al div contenente?css - posizione div alla fine del contenimento div
<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>
Questo codice inserisce il testo "all'interno" nella parte inferiore della pagina.
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
deve essere
.outside {
position: relative;
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
posizionamento assoluto cerca il genitore posizionato relativamente vicina ai DOM, se non è definito userà il corpo.
Grazie. Puoi spiegare perché? –
'absolute' cerca il genitore' relativo' più vicino. Di default è il 'body' del' documento'. Quindi se nessun oggetto DOM padre ('.outside') ha la proprietà di essere' relativo' il tuo '.inside' andrà alla fine del tag body. –
"* Il posizionamento assoluto cerca il genitore relativamente più vicino all'interno del DOM, se uno non è definito userà il corpo. *" Hai appena spiegato ** così ** molto per me! Ora inizio davvero a capire i CSS. *** GRAZIE! *** –
Assegna position:relative a .outside e quindi position:absolute; bottom:0; al numero .inside.
Come così:
.outside {
position:relative;
}
.inside {
position: absolute;
bottom: 0;
}
Semplice e fantastico. –
questa potrebbe essere la base per un footer appiccicoso, no? –
Non riesco a utilizzare la posizione: assoluta; per il secondo div. questa è la mia restrizione, puoi darmi altre opzioni? –
Aggiungi position: relative-.outside. (https://developer.mozilla.org/en-US/docs/CSS/position)
Gli elementi posizionati relativamente sono ancora considerati nel normale flusso di elementi nel documento. Al contrario, un elemento che viene posizionato in modo assoluto viene estratto dal flusso e quindi non occupa spazio quando posiziona altri elementi. L'elemento posizionato in modo assoluto è posizionato rispetto all'antenato posizionato più vicino. Se un antenato posizionato non esiste, viene utilizzato il contenitore iniziale.
Il "contenitore iniziale" sarebbe <body>, ma aggiungendo alla suddetta rende .outside posizionato.
La migliore risposta IMO; in realtà ha una spiegazione! – Bojangles
.outside ha bisogno di 'posizione: relativo;' – Imperative
relativo, sì, e quindi non sa quanto deve essere grande per contenere il contenuto di child-div, purtroppo, quindi a meno che non si tratti di un valore statico, indietro alla domanda originale Come posizionare un div in fondo a un altro div (sottinteso: "senza rompere tutto"). – JosephK