September 11
Posizionamento assoluto permette di dire al browser esattamente dove collocare un elemento sullo schermo. Se si vuole mettere una scatola sulla parte inferiore dello schermo, per esempio, è possibile impostare la propria posizione di "assoluto" e quindi aggiungere "bottom: 0;". Ottenere la casella di galleggiare verso il fondo del suo elemento contenitore, ad esempio un div, richiede ancora una riga di codice. Se l'elemento di contenimento ha una posizione relativa, l'elemento inferiore allineato andrà esattamente dove si desidera, nella parte inferiore del div.
1 Ottenere l'ID di entrambi gli elementi principali e secondari dal codice HTML della pagina Web. L'elemento figlio è quello che si desidera visualizzare in fondo a un div. Questo può essere qualsiasi cosa, come un paragrafo, un'immagine o un link. Il div che contiene questo elemento è l'elemento principale:
<Div id = "wrapper">
<Div id = "box"> <div>
</ Div>
In questo esempio, il div "involucro" è l'elemento principale. Il "box" div il bambino, ed è ciò andrà in fondo "involucro".
2 Aprire il foglio di stile CSS o aggiungere il codice CSS tra una coppia di "<style>" tag trovato verso la parte superiore del codice HTML. Aggiungere questi tag tra la "<head>" tag se non li trovate:
<Style type = "text / css">
</ Style>
3 Impostare l'elemento di fondo in linea con il posizionamento assoluto, quindi impostare la posizione inferiore a zero:
scatola {
position: absolute;
in basso: 0;
}
Se andare insieme con l'esempio "scatola", è necessario anche un larghezza, altezza e un colore di sfondo per rendere la scatola e compilarlo:
scatola {
position: absolute;
in basso: 0;
width: 200px;
height: 200px;
background-color: red;
}
4 Aggiungere posizionamento relativo al div genitore. Si può anche dare il div un'altezza, soprattutto se si sta seguendo con l'esempio "scatola":
wrapper {
position: relative;
altezza: 400px;
}
Quando si dà il posizionamento relativo ad un elemento genitore, tutti i suoi figli sarà limitato all'interno dei suoi confini. Se non si utilizza questo trucco, allora l'elemento che si desidera allineare fondo galleggia fino al fondo della schermata del browser.