,

,

,

. Etichetta
abbastanza spesso utilizzato nel layout dei siti Web moderni per creare griglie e significa semplicemente una sorta di blocco o contenitore. È anche possibile nidificare altri tag al suo interno, cosa che non è possibile con tutti gli elementi del blocco
comodo da usare. I blocchi sono solitamente impilati uno sopra l'altro e non sono inseriti negli elementi in linea. Gli elementi in linea HTML sono testo e i CSS vengono utilizzati per modellarlo.
Data una larghezza del contenuto, la larghezza totale del blocco è la somma dei valori di riempimento, margine, bordo e larghezza destro e sinistro. Ad una determinata altezza: dall'imbottitura superiore e inferiore, dai margini, dai bordi e dall'altezza. Per impostazione predefinita, il testo negli elementi blocco è allineato a sinistra. Se uno di essi contiene elementi in linea insieme ad elementi di blocco, attorno agli elementi in linea viene creato un blocco anonimo. Ad esso verrà applicato lo stile predefinito. Erediterà anche lo stile specificato assegnato al suo genitore.
Flusso di documenti
Il flusso si riferisce all'ordine in cui vengono visualizzati gli elementi della pagina, determinato dalle proprietà specificate nei CSS. In questo caso, per impostazione predefinita, i blocchi vengono disposti dall'alto verso il basso e i tag di linea, se non c'è abbastanza spazio, vengono spostati in nuova linea e sono disposti dall'alto verso il basso e da sinistra a destra. La posizione di un elemento nella pagina dipende dalla sua posizione nel codice: più è in alto, prima si trova. Ciascuno degli elementi del blocco sembra un rettangolo che allontana i suoi vicini. Puoi modificare questo comportamento utilizzando proprietà speciali. Allineare determinati blocchi al centro o ai lati di un contenitore nei CSS è chiamato posizionamento.
Elementi di posizionamento
Il posizionamento dei blocchi può essere controllato utilizzando il posizionamento assoluto e relativo. Il posizionamento viene utilizzato per assegnare ad ampie sezioni di una pagina una posizione specifica, per creare interfacce complesse, popup ed elementi decorativi. La proprietà principale utilizzata per posizionare i blocchi nei CSS è la posizione. Ha quattro proprietà principali:
• parente;
• assoluto;
• fisso;
• statico.
Con il loro aiuto, puoi cambiare modalità di layout specificando uno dei quattro parametri: superiore, destra, inferiore o sinistra. C'è anche una proprietà per ordinare i livelli: z-index. Il posizionamento con la proprietà statica non viene in genere utilizzato perché denota il posizionamento predefinito dei blocchi. Pertanto, l'utilizzo di eventuali parametri non lo influenza in alcun modo. Le altre tre proprietà vengono utilizzate per il layout: relativo, assoluto, fisso.
Posizionamento relativo
Il posizionamento relativo dei blocchi nei CSS, ovvero la proprietà position: relative, significa che un elemento può essere spostato e la sua posizione originale modificata. Tale blocco rimane ancora nel flusso. In effetti, non è lui stesso ad essere rimpiazzato, ma la sua copia. I valori delle proprietà sono impostati per indicare esattamente quanto il blocco si sposterà in una direzione o nell'altra. Nella maggior parte dei casi vengono misurati in pixel. Ma è accettabile utilizzare altre unità.

Utilizzo delle proprietà per il posizionamento relativo
La proprietà top sposta una copia di un particolare blocco verso l'alto o verso il basso del numero di pixel specificati nella proprietà. Quando lo si utilizza, gli elementi situati sotto o sopra rimangono al loro posto, poiché in realtà neanche il blocco spostato si sposta da nessuna parte.
La proprietà bottom sposta il blocco nella direzione opposta alla proprietà top. Un valore positivo aiuta a spostarlo verso l'alto, mentre un valore negativo aiuta a spostarlo verso il basso. Le proprietà right e left spostano l'elemento rispettivamente a destra e a sinistra. Combinandoli tutti, puoi impostare la posizione esatta del blocco sulla pagina, spostandolo lungo gli assi delle coordinate verticale e orizzontale. Se aumenti i rientri, questi verranno calcolati non dal bordo del blocco stesso, ma dall'offset della sua copia sul lato.

Posizionamento assoluto
Il posizionamento assoluto dei blocchi nei CSS è specificato dal valore della proprietà posizione assoluta. Un elemento posizionato cade assolutamente fuori dal flusso del documento e il suo posto viene preso dai blocchi vicini. La larghezza di un tale elemento viene allungata a seconda del suo contenuto e può essere spostata impostando determinati valori per le proprietà superiore, sinistra, destra, inferiore. Il posizionamento assoluto dei blocchi nei CSS è utile per le intestazioni. Ma position: Absolute funziona non solo per gli elementi blocco, ma anche per gli elementi in linea.
Allineamento degli elementi al centro
Un elemento posizionato assolutamente in linea si comporterà esattamente come un elemento in linea. Pertanto, il posizionamento può essere utilizzato anche per controllare il testo nei CSS. Puoi applicargli alcune nuove proprietà, ad esempio modificare l'altezza e la larghezza. La centratura e l'allineamento verticale nei CSS utilizzano una combinazione di diverse proprietà. Controlla l'allineamento verticale della proprietà superiore. Se vuoi centrare un blocco nei CSS, il contenitore principale dovrebbe essere posizionato relativamente e l'elemento allineato dovrebbe essere posizionato in modo assoluto. Il contenitore deve impostare la proprietà top: 50% e per spostare l'elemento della metà della sua altezza, utilizzare la proprietà Translate con il valore “0, -50%”. Gli elementi posizionati in modo assoluto possono essere separati in un nuovo tipo, poiché ad essi vengono applicate proprietà che non sono disponibili per altri tipi di posizionamento.

Posizionamento relativo all'angolo in alto a sinistra del browser
Le proprietà left, top, right e bottom funzionano in modo diverso su elementi posizionati in modo assoluto e relativo. Per gli elementi relativi, queste proprietà impostano l'offset rispetto alla posizione dell'elemento. Quelli posizionati in modo assoluto occupano un posto relativo ad uno specifico sistema di coordinate legato alla dimensione della finestra del browser. I punti di partenza di questo sistema sono gli angoli della finestra. Quando si utilizza la proprietà left, il rientro verrà conteggiato dal lato sinistro del browser, ma non sarà presente alcuna barra di scorrimento. La proprietà top, se posizionata in modo assoluto, specifica l'offset dalla parte superiore del browser alla parte superiore dell'elemento a cui viene applicata. Combinando entrambe le proprietà, l'elemento può essere spostato rispetto all'angolo in alto a sinistra del browser.

Posizionamento relativo all'angolo in alto a destra del browser
Allo stesso modo, utilizzando le proprietà right e top, puoi premere un elemento sul lato destro della finestra del browser e modificarne la posizione verticale, spostandolo verso destra angolo superiore. Se la proprietà destra è impostata su un valore negativo, il blocco si sposterà all'esterno del bordo della finestra. Successivamente, dovrebbe apparire una barra di scorrimento. Per spostare un elemento verso il basso, utilizzare la proprietà bottom. Specifica il rientro dal bordo inferiore della finestra del browser alla fine del blocco. Se il suo valore è negativo, appare anche una barra di scorrimento, poiché l'elemento viene spostato oltre il bordo inferiore della finestra del browser.
Sistema di coordinate per il posizionamento assoluto
Per impostazione predefinita, tutti gli elementi a cui viene assegnato un posizionamento assoluto sono legati a un sistema di coordinate: la finestra del browser. Ma può essere modificato assegnando ad alcuni elementi principali il posizionamento relativo. Quindi il blocco figlio cambierà la sua posizione a seconda del genitore. Se tra gli elementi genitori ce ne sono più con posizionamento relativo, allora il conteggio viene effettuato dal più vicino di essi. In questo caso il posizionamento predefinito sarà quello specificato nel tag body.

Punto di riferimento per un elemento posizionato in modo assoluto
Prima che a un elemento venisse assegnato un posizionamento assoluto, in qualche punto veniva chiamato origine implicita. Se a tale blocco non vengono assegnate proprietà, non si sposterà. Puoi spostarlo impostando la proprietà margin. Funzionerà in modo simile alle proprietà di posizionamento. Se non definisci il valore della proprietà left e di tutte le altre, allora sarà uguale ad auto. Puoi anche utilizzare auto per riportare gli elementi nelle loro posizioni originali.

Posizionamento fisso
Un altro valore è fisso. La proprietà position ancora un elemento in una posizione specifica. Il posizionamento fisso viene spesso utilizzato per creare menu nei CSS. È simile all'assoluto, ma il blocco fisso cade fuori dal flusso. Anche quando si scorre la pagina, tale elemento rimarrà al suo posto, quindi è conveniente utilizzarlo per creare un menu nei CSS. Il punto di partenza sarà legato alla finestra del browser. Se sono presenti più blocchi posizionati, per ordinarli viene utilizzata la proprietà z-index. Con il suo aiuto, puoi sovrapporre i blocchi relativi a quelli assoluti se dai loro l'indice corrispondente, espresso come numero intero. Più è grande, più alto sarà il blocco.
Dall'autore: Saluti. Il posizionamento degli elementi CSS è un argomento molto importante nella creazione di un sito web. In questo articolo propongo di esaminare più in dettaglio tutti i modi per spostare i blocchi in una pagina web.
Quali sono i tipi
Se parliamo del posizionamento degli elementi del blocco, questo viene impostato utilizzando la proprietà position. Ha quattro significati e ciascuno merita una considerazione separata.
Posizionamento assoluto
Questa è la prima specie conosciuta. È impostato così: posizione: assoluta. Successivamente, il blocco perde le sue solite proprietà e cade completamente dal flusso normale. Cos'è questo flusso? Prova a posizionare diversi elementi di blocco in fila nel tuo markup. Come diventeranno? Uno dopo l'altro, e in nessun altro modo.
Questo è il comportamento normale dei blocchi per impostazione predefinita. Ma cosa succede a un blocco per il quale è definito il posizionamento assoluto? Esce completamente dal flusso normale, gli altri blocchi semplicemente smettono di notarlo, come se non fosse mai esistito, ma l'elemento rimane sulla pagina. Il posizionamento assoluto nei CSS viene spesso utilizzato per il posizionamento preciso di elementi decorativi, icone e altri elementi di progettazione.
Ora può essere spostato utilizzando le proprietà sinistra, destra, superiore e inferiore. Per impostazione predefinita, il movimento è relativo ai bordi della finestra del browser, ma se l'elemento genitore ha position: relative, allora il movimento è relativo al blocco genitore.
Blocco( posizione: assoluta; sotto: 0; destra: 0; )
Blocca ( posizione: assoluta; in basso: 0; destra: 0;
L'elemento verrà spostato nell'angolo in basso a destra. Ho notato che spesso fanno il pulsante in alto in questo modo: lo posizionano semplicemente nell'angolo. Ecco un altro esempio in cui mostrerò prima il possibile markup:
< div id = "wrapper" > < div class = "block" > < / div > < / div >
E ora gli stili CSS per questo frammento:
#wrapper( posizione: relativa; ) .block( posizione: assoluta; superiore: 0; destra: 10px; )
#involucro( posizione: relativa; Blocca ( posizione: assoluta; superiore: 0; destra: 10px;
In questo esempio, abbiamo prima assegnato il posizionamento relativo al contenitore principale (relativo - ne parleremo più avanti nell'articolo), quindi impostato il posizionamento assoluto per lo stesso element.block. Di conseguenza, le coordinate verranno conteggiate non dalla finestra del browser stessa, ma dai bordi dell'elemento genitore, ovvero il blocco wrapper.

Posizionamento relativo degli elementi CSS
Questo è il tipo successivo ed è scritto così – posizione: relativa. Le coordinate sono specificate dalle stesse proprietà della posizione assoluta. L'unica differenza significativa è che l'elemento non cade formalmente dal flusso: c'è spazio per esso.
Il funzionamento di questo valore può essere paragonato alla visibilità: hidden, quando l'elemento è nascosto dalla pagina, ma lo spazio sottostante rimane intatto. La stessa cosa accade con il posizionamento relativo: il blocco può essere spostato ovunque, ma lo spazio rimane vuoto e non sarà occupato da altre parti.
È anche importante sapere che l'offset non avviene dai bordi della finestra del browser web, ma dal punto in cui si trovava originariamente il blocco. Questo è:
Blocco (posizione: relativa; superiore: 10px; destra: 50px;)
Blocca ( posizione: relativa; in alto: 10px; destra: 50px;
Il blocco si sposterà di 50 pixel a destra e di 10 a sinistra.

Fissazione
Probabilmente hai visto più di una volta sui siti Internet quando, durante lo scorrimento, alcuni banner non sono scomparsi, ma hanno continuato a trovarsi nella tua zona di visibilità, come se fossero bloccati in un punto. Ciò viene implementato principalmente utilizzando il posizionamento fisso. Per fare questo è necessario scrivere:
Posizione: posizione statica o statica normale
L'ultimo tipo è statico, questo è il comportamento abituale degli elementi blocco. Non è necessario specificarlo perché lo è per impostazione predefinita, ma è comunque necessario conoscere il quarto valore. A volte position: static viene scritto per sovrascrivere un altro tipo di posizionamento quando si verificano determinati eventi su una pagina web.

Come posizionare correttamente i blocchi nei CSS?
Abbiamo discusso i significati, ma questo non è sufficiente per chiudere l'argomento. Bisogna infatti capire dove e quali tipologie di posizionamento applicare. Ti ho già fornito un esempio con fisso: può essere utilizzato per creare colonne laterali, intestazioni o piè di pagina appiccicosi.
Il posizionamento relativo aiuterà quando è necessario spostare leggermente un blocco rispetto alla sua posizione e allo stesso tempo mantenerne la posizione nel flusso. Viene inoltre dato ai blocchi genitori di utilizzare il movimento assoluto per gli elementi figli.
Altre tecniche: centratura, blocchi fluttuanti
La proprietà position non risolve tutti i problemi con il posizionamento degli elementi blocco. Come creeresti, ad esempio, una griglia del sito utilizzandolo? non ho buone idee. È qui che altre proprietà vengono in soccorso.
Le griglie sono spesso realizzate utilizzando i float nei CSS. La proprietà consente di premere un blocco sul bordo sinistro o destro del genitore (float: left, float: right), consentendo a diversi elementi del blocco di allinearsi su un'unica riga, cosa comune su qualsiasi sito.
La centratura viene eseguita in questo modo: il blocco deve scrivere una certa larghezza e quindi impostare il margine: 0 proprietà auto. È il valore automatico che lo allineerà orizzontalmente esattamente al centro. Naturalmente, per questo deve essere l'unico della sua linea, altrimenti non funzionerà nulla.
Tutti i tipi di posizionamento elencati in questo articolo possono essere utili a uno sviluppatore web. Da qualche parte devi inserire un'icona (posizione: assoluta), da qualche parte devi regolare leggermente la posizione del blocco, lasciando un po' di spazio dietro di esso (posizione: relativa), e da qualche parte devi fissare il widget (posizione: fissa). In generale, la conoscenza di questa proprietà non sarà sicuramente superflua.
Bene, per imparare ancora di più dal mondo della creazione di siti Web, assicurati di iscriverti al nostro blog e ricevere nuovi materiali di formazione. Ti consiglio anche di guardare il nostro, dove viene sollevato anche un argomento simile. (posizionamento degli elementi)
Condividere
Condividere
Twitta
Come
Come