Posizionamento assoluto rende possibile dire al browser esattamente dove posizionare un elemento sullo schermo. Se volete mettere una casella nella parte inferiore dello schermo, ad esempio, puoi impostare la posizione di "assoluto" e quindi aggiungere "bottom: 0;". Ottenere la casella di galleggiare giù alla parte inferiore dell'elemento contenitore, ad esempio div, richiede più una riga di codice. Se l'elemento contenitore ha una posizione relativa, quindi l'elemento allineato alla parte inferiore andrà esattamente dove vuoi, nella parte inferiore del div.

Istruzioni

1

Ottenere l'ID degli elementi padre e figlio dal codice HTML della tua pagina Web. L'elemento figlio è quello che si desidera visualizzare nella parte inferiore di un div. Questo può essere qualsiasi cosa come un paragrafo, immagine o un collegamento. Il div che contiene questo elemento è l'elemento padre:

< div id = "wrapper" >
< div id = "casella" >< div >
< / div >

In questo esempio, il div "wrapper" è l'elemento padre. Il div "casella" il bambino ed è quello che andrà nella parte inferiore del "wrapper".

2

Aprire il tuo file di foglio di stile CSS o aggiungere il codice CSS tra una coppia di tag di "stile < >" trovato verso la parte superiore del codice HTML. Aggiungere questi tag tra i tag "< head >" se non li trovate:

< style type = "text/css" >
< / stile >

3

Imposta l'elemento con posizionamento assoluto allineato alla parte inferiore, quindi impostare la posizione di fondo a zero:

casella () {

Posizione: assoluta;
fondo: 0;
}

Se andando avanti con l'esempio di "box", è inoltre necessario una larghezza, altezza e un colore di sfondo per rendere la casella e compilarlo:

casella () {

Posizione: assoluta;
fondo: 0;
Larghezza: 200px;
Altezza: 200px;
colore di sfondo: rosso;
}

4

Aggiungere il posizionamento relativo per il genitore DIV. Si può anche dare il div un'altezza, specialmente se si stanno seguendo insieme con l'esempio di "casella":

Wrapper () {

Posizione: relativo;
Altezza: 400px;
}

Quando si dà il posizionamento relativo a un elemento padre, tutti i suoi figli sarà limitati entro i suoi confini. Se non si utilizza questo trucco, quindi l'elemento che si desidera fondo allineare volontà galleggiare giù alla parte inferiore della schermata del browser.