Posizionamento di elementi in una pagina Web con la proprietà Posizione CSS

Aprile 30, 2024

Prima di Cascading Style Sheets, eri limitato nel controllo che avevi sulla posizione degli oggetti sulla tua pagina web. È possibile utilizzare la tabella HTML per controllare leggermente il posizionamento, ma non è stato molto preciso. Ora con CSS, puoi avere un controllo preciso su come ogni elemento è posizionato sulla tua pagina web.

Prima di poter utilizzare la proprietà position CSS per posizionare gli elementi sulla tua pagina web, dobbiamo discutere della terminologia utilizzata per comunicare con il browser web. CSS non considera solo la larghezza e l'altezza della tua pagina web, ma anche le dimensioni del browser web.

Larghezza e altezza del browser
All'inizio, potresti pensare che si riferisca alla finestra del browser aperta. Ma si riferisce davvero all'intero browser inclusi i controlli e i pulsanti.
Larghezza e altezza in tempo reale
Questo è il termine per l'area di visualizzazione del browser. Non include i controlli.
Larghezza e altezza del documento
Questa è l'intera larghezza e altezza della tua pagina web. Se queste dimensioni sono maggiori della larghezza e dell'altezza Live, il browser visualizzerà le barre di scorrimento in base alle esigenze.

Ora che conosci i termini per i confini in cui puoi posizionare le parti della tua pagina web usando i CSS, diamo un'occhiata ai quattro valori di posizione.

Statico
Questo è il valore predefinito. Salvo diversamente specificato per un elemento, il browser utilizzerà il posizionamento statico. Proprio come sembra, con il posizionamento statico non è possibile riposizionare gli elementi sulla pagina Web. Quindi, in che modo il browser determina dove posizionare ciascun oggetto sulla tua pagina web? Posiziona ogni elemento nell'ordine in cui si verificano nel tuo codice HTML. Se hai un'immagine del logo, quindi un saluto e quindi l'avviso di copyright nel tuo HTML, il browser li inserirà nella pagina web in questo ordine. Non puoi spostare il saluto sopra l'immagine del logo.
Parente
Il posizionamento relativo funziona come statico in quanto l'ordine degli elementi nel codice HTML controlla il flusso degli elementi nella pagina. Tuttavia, è possibile utilizzare il posizionamento relativo per controllare la posizione di un elemento rispetto agli altri elementi nella pagina Web.
Assoluto
Quando si utilizza il posizionamento assoluto con un elemento, questo renderà tale elemento indipendente dal resto della pagina Web. Poiché il posizionamento non è più determinato dall'ordine dell'HTML, sarà necessario utilizzare le coordinate X e Y per posizionare l'elemento.
Fisso
Funziona allo stesso modo del posizionamento assoluto. Tuttavia, l'elemento con posizionamento fisso non scorrerà con la pagina Web. Questa è una bella funzione da usare per un logo o un menu che desideri rimanere visibile mentre la pagina scorre verso l'alto.

Istruzioni Video: Positioning in CSS - posizionare gli elementi con CSS! (Aprile 2024).

Posizionamento di elementi su una pagina Web con la proprietà Posizione CSS, HTML, CSS, proprietà posizione CSS, posizionamento statico, posizionamento relativo, posizionamento assoluto, posizionamento fisso, come posizionare gli elementi su una pagina Web, utilizzare CSS per posizionare gli elementi su una pagina Web

Articolo Precedente

Articolo Successivo

Nero 7 Ultra: software gratuito per masterizzare DVD

Aprile 2024

Nero è probabilmente la migliore applicazione CDR / DVDR all-in-one sul mercato. Sebbene principalmente nota per la sua abilità di masterizzazione di CD e DVD, la versione più recente di Nero Ultra...

computer

Ghost Recon - Island Thunder

Aprile 2024

Se sei un fan della serie di giochi Ghost Recon, il set Island Thunder porta i tuoi giochi basati su plotone in una Cuba ostile del futuro. C'è un'ottima grafica, in cui ognuno dei tuoi amici e...