chiamato anche strato per strato, e i blocchi stessi sono strati. Questo perché quando si utilizzano determinati valori di proprietà, possono essere impilati uno sopra l'altro, come i livelli in Photoshop.
Nel layout a blocchi, il posizionamento dei livelli viene eseguito al meglio utilizzando fogli di stile a cascata. La principale proprietà CSS responsabile del posizionamento
, è un galleggiante.
Sintassi della proprietà:
float: sinistro | destra | nessuno | ereditare ,
In cui si:
left - allinea l'elemento a sinistra dello schermo. Il flusso attorno al resto degli elementi avviene a destra;
destra - allineamento a destra, flusso attorno ad altri elementi - a sinistra;
nessuno - non è consentito avvolgere;
inherit - eredita il valore dell'elemento genitore.
Diamo un'occhiata a un esempio leggero di posizionamento div utilizzando questa proprietà:
Blocco sinistro
Blocco destro
Ora proviamo ad utilizzare la stessa proprietà per posizionare il terzo div al centro della pagina. Ma sfortunatamente float non ha un valore centrale. E quando imposti un nuovo blocco sul valore di allineamento a destra oa sinistra, viene spostato nella direzione specificata. Pertanto, resta solo da impostare float: lasciato a tutti e tre i blocchi:
Ma anche questa non è l'opzione migliore. Quando la finestra viene ridotta, tutti i livelli sono disposti in una riga verticalmente e quando la dimensione viene aumentata, si attaccano al bordo sinistro della finestra. Pertanto, è necessario un modo migliore per centrare l'allineamento del div.
Strati di centraggio
Nel prossimo esempio, utilizzeremo un livello contenitore in cui posizioneremo il resto degli elementi. Questo risolve il problema dei blocchi che si spostano l'uno rispetto all'altro quando la finestra viene ridimensionata. Il centraggio del contenitore al centro viene effettuato impostando le proprietà del margine su zero per il margine superiore e auto sui lati (margine: 0 auto):
Blocco sinistro
Blocco centrale
Blocco destro
Questo stesso esempio mostra come centrare un div orizzontalmente. E se modifichi leggermente il codice sopra, puoi ottenere l'allineamento verticale dei blocchi. Per fare ciò, devi solo modificare la lunghezza del livello del contenitore (ridurla). Cioè, dopo aver modificato il suo css, la classe dovrebbe apparire così:
Dopo la modifica, tutti i blocchi si allineeranno rigorosamente in fila al centro. E la loro posizione non cambierà in nessuna dimensione della finestra del browser. Ecco come appare il centraggio verticale del div:
Nell'esempio seguente, abbiamo utilizzato una serie di nuove proprietà CSS per centrare i livelli all'interno del contenitore:
Una breve descrizione delle proprietà css e dei loro valori che abbiamo usato in questo esempio per centrare il div all'interno del div:
display: inline-block - Allinea un elemento di blocco a una linea e assicura che sia avvolto attorno a un altro elemento.
vertical-align: middle - allinea l'elemento al centro rispetto al genitore;
margin-left - imposta il margine a sinistra.
Come creare un collegamento da un livello
Sembra strano, ma è possibile. A volte può essere necessario un blocco div come collegamento durante la disposizione di vari tipi di menu. Diamo un'occhiata a un esempio pratico di implementazione di un livello di collegamento:
Link al nostro sito
In questo esempio, utilizzando la riga display: block, impostiamo il collegamento al valore dell'elemento block. E per rendere l'intera altezza del blocco div un collegamento, imposta l'altezza: 100%.
Nascondere e mostrare elementi di blocco
Gli elementi di blocco forniscono più opzioni per estendere la funzionalità dell'interfaccia rispetto al layout di tabella obsoleto. Capita spesso che il design di un sito web sia unico e riconoscibile. Ma per una tale esclusiva devi pagare con la mancanza di spazio libero.
Ciò è particolarmente vero per la home page, che ha il costo più elevato di posizionamento degli annunci. Pertanto, c'è un problema dove "spingere" un altro banner pubblicitario. Allineare il div al centro della pagina non basta!
Una soluzione più razionale è rendere nascosti alcuni blocchi. Ecco un semplice esempio di tale implementazione:
Questo è un pulsante magico. Facendo clic su di esso si nasconderà o mostrerà il blocco nascosto.
Dall'autore: Saluti. Il posizionamento degli elementi CSS è un argomento molto importante nella creazione di siti. In questo articolo, propongo di considerare in modo più dettagliato tutti i modi per spostare i blocchi nella pagina web.
Quali sono i tipi Se parliamo del posizionamento degli elementi del blocco, allora viene impostato utilizzando la proprietà position. Ha quattro significati e ognuno merita una considerazione separata.
Posizionamento assoluto Questa è la prima specie conosciuta. È impostato in questo modo: posizione: assoluta. Successivamente, il blocco perde le sue solite proprietà e abbandona completamente il flusso normale. Cos'è questo flusso? Prova a mettere più elementi di blocco in fila nel markup. Come diventeranno? Uno dopo l'altro, e non altrimenti.
Questo è il normale comportamento predefinito dei blocchi. Ma cosa succede a un blocco che ha definito il posizionamento assoluto? Esce completamente dal flusso normale, altri blocchi semplicemente smettono di notarlo, come se non fosse mai esistito, ma l'elemento rimane sulla pagina. Il posizionamento assoluto in CSS viene spesso utilizzato per il posizionamento preciso di elementi decorativi, icone e altri elementi di design.
Ora può essere spostato utilizzando le proprietà sinistra, destra, superiore e inferiore. Per impostazione predefinita, il movimento avviene rispetto ai bordi della finestra del browser, ma se l'elemento padre ha posizione: relativo, allora l'offset si verifica rispetto al blocco padre.
Blocco (posizione: assoluta; in basso: 0; a destra: 0;)
Blocco (
posizione: assoluta;
in basso: 0;
destra: 0;
L'elemento verrà spostato nell'angolo inferiore destro. Noto che il pulsante in alto viene spesso fatto in questo modo: lo posizionano semplicemente nell'angolo. Ecco un altro esempio, in cui ti mostro 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; alto: 0; destra: 10px;)
#involucro (
posizione: relativa;
Blocco (
posizione: assoluta;
in alto: 0;
a destra: 10px;
In questo esempio, abbiamo prima scritto il posizionamento relativo al contenitore padre (relativo - a riguardo più avanti nell'articolo), quindi abbiamo impostato il posizionamento assoluto per lo stesso elemento .block. Di conseguenza, le coordinate verranno conteggiate non dalla finestra del browser stessa, ma dai bordi dell'elemento padre, ovvero il blocco wrapper.
Posizionamento relativo degli elementi css Questa è la vista seguente ed è scritta così - position: relative. Le coordinate sono impostate con le stesse proprietà della posizione assoluta. L'unica differenza significativa è che l'elemento non cade formalmente dal flusso: c'è spazio per questo.
Questo valore funziona come visibilità: nascosto, quando l'elemento è nascosto dalla pagina, ma lo spazio sottostante non viene toccato. Lo stesso accade con il posizionamento relativo: il blocco può essere spostato ovunque, ma lo spazio per esso rimane vuoto e le altre parti non lo prenderanno.
È anche importante sapere che l'offset non si verifica dai bordi della finestra del browser Web, ma da dove si trovava originariamente il blocco. Questo è:
Blocco (posizione: relativa; in alto: 10 px; a destra: 50 px;)
Blocco (
posizione: relativa;
in alto: 10px;
a destra: 50 pixel;
Il blocco si sposterà di 50 pixel a destra e di 10 pixel a sinistra.
Fissazione Sicuramente su Internet avrete visto più di una volta sui siti quando, scorrendo, qualche banner non scompariva, ma continuava ad essere nella vostra zona di visibilità, come se si attaccasse ad un posto. Questo viene fatto principalmente utilizzando il posizionamento fisso. Per fare ciò, è necessario scrivere:
Posizione: posizione statica statica o normale L'ultimo tipo è statico, questo è il comportamento usuale degli elementi del blocco. Non è necessario scriverlo, perché è predefinito, ma è comunque necessario conoscere il quarto valore. A volte viene scritto con position: static per annullare un diverso tipo di posizionamento su determinati eventi della pagina web.
Come faccio a posizionare correttamente i blocchi in css? Abbiamo considerato i significati, ma questo non basta per chiudere questo argomento a noi stessi. In realtà, è necessario capire dove e quali tipi di posizionamento dovrebbero essere applicati. Ti ho già fornito un esempio con uno fisso: puoi usarlo per creare barre laterali, intestazioni o piè di pagina appiccicosi.
Il posizionamento relativo può essere d'aiuto quando è necessario spostare leggermente un blocco rispetto alla sua posizione e mantenerlo comunque nel flusso. È anche impostato sui blocchi padre per utilizzare il movimento assoluto per i bambini.
Altri trucchi: centratura, blocchi flottanti La proprietà position non risolve tutti i problemi con la disposizione degli elementi del blocco. Come creeresti, ad esempio, una griglia del sito utilizzandola? Non ho buone idee. Qui altre proprietà vengono in soccorso.
Le griglie sono spesso realizzate utilizzando float in css. La proprietà ti consente di spingere il blocco sul bordo sinistro o destro del genitore (float: left, float: right), consentendo a diversi elementi di blocco di diventare in una riga, cosa comune a qualsiasi sito.
La centratura viene eseguita in questo modo: il blocco deve scrivere una certa larghezza, quindi impostare il margine della proprietà: 0 su 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 per uno sviluppatore web. Da qualche parte l'icona deve essere inserita (posizione: assoluta), da qualche parte, la posizione del blocco dovrebbe essere leggermente regolata, lasciando un posto dietro di essa (posizione: relativa) e dove il widget dovrebbe essere fissato (posizione: fisso). In generale, la conoscenza di questa proprietà non sarà sicuramente superflua.
Bene, per imparare ancora di più dal mondo della costruzione di siti, assicurati di iscriverti al nostro blog e ricevere nuovi materiali di formazione. E ti consiglio anche di dare un'occhiata al nostro, dove viene sollevato anche un argomento simile. (posizionamento articolo)
Proprietà posizione ha i seguenti significati
Aggiungi un tag vuoto davanti al div con class = "primer" -.
introduzione Gli elementi in una pagina web occupano un po' di spazio. Per analogia con le navi nel gioco "Sea Battle". Dovrebbero esserci caselle vuote tra le navi - margini.
Per posizionare un elemento sopra un altro, è necessario impostare un valore negativo per il margine. Ma poi il contenuto dei tag si sovrapporrà. Con l'aiuto delle proprietà di posizione e sono in qualche modo sollevate al livello 2.
In ordine naturale, i tag in basso vengono mostrati sopra i tag in alto nel codice. Grazie allo z-index al livello 2, puoi definire tu stesso l'elemento visibile.
Posizionamento statico - posizione: statico; posizione: statico è l'impostazione predefinita e sovrascrive relativo, assoluto e fisso. I valori delle proprietà superiore, inferiore, destra e sinistra vengono ignorati. In assenza di trasformazione, lo z-index viene ignorato.
Posizionamento relativo - posizione: relativo; Verrà data priorità al blocco che assegniamo a position: relative. Il contenuto dell'elemento inferiore è nascosto.
Per posizionare il blocco B sopra C, ma sotto A, non è sufficiente assegnare la posizione: relativa ad esso, perché nel codice è sotto il blocco A, il che significa che lo sovrapporrà.
È inoltre necessario impostare lo z-index per l'elemento B e inferiore a quello del blocco A.
Invece del margine durante il posizionamento relativo, a volte è meglio utilizzare le proprietà superiore, inferiore, destra e sinistra. Il punto di partenza per loro è la posizione iniziale dell'elemento. Allo stesso tempo, il blocco B continua a trovarsi come se il blocco A si trovasse nello stesso posto: gli lascia spazio vuoto. Pertanto, non è necessario evocare con un div vuoto ().
Completa analogia con la proprietà
Per elementi in linea Gli elementi in linea non vengono spostati in alto e in basso (). Solo in alto, in basso
B UN B
o
B UN B
B a b
Posizionamento assoluto e fisso Sembrerebbe che il blocco con posizione: assoluto dovrebbe essere più alto di posizione: relativo, ma non è così, l'ordine naturale si applica qui. Ciò significa che z-index ti consentirà di selezionare l'elemento prioritario tra di loro.
Il blocco C ignora la posizione originale del blocco B, perché con posizione: assoluta e posizione: fissa, l'elemento cessa di influenzare i tag adiacenti sia attraverso la sua larghezza / altezza, sia tramite float: sinistra.
Tabella riassuntiva proprietà distintive posizione: statica; posizione: relativa; posizione: assoluta; posizione: fissa;
sovrapposizione è meglio non mettere gli elementi uno sopra l'altro gli elementi hanno la precedenza su statici. Gli altri valori sono gli stessi. Visibile sarà quello che è sotto nel codice o ha un grande z-index
punto di riferimento in alto, a destra, in basso e a sinistra ignorato posizione originale dell'elemento il bordo dell'elemento genitore il bordo della finestra del browser
elementi intorno prendere in considerazione la posizione attuale dell'elemento tenere conto della posizione originale dell'elemento ignora la posizione dell'elemento
larghezza: 100%; questa è la larghezza elemento (per inline) / elemento padre (per blocco) elemento genitore con posizione non in un valore statico finestre del browser
durante lo scorrimento dell'elemento della pagina si sposta "si attacca" alla posizione specificata della finestra del browser
E ora, per consolidare il materiale, fai clic sui pulsanti all'inizio dell'articolo, pensa al motivo per cui si sono verificati tali cambiamenti.
Gli sviluppatori Web di questi tempi possono creare layout complessi di pagine Web utilizzando varie tecniche CSS. Alcune di queste tecniche hanno una lunga storia (float), altre (flexbox) hanno guadagnato popolarità negli ultimi anni.
In questo articolo, daremo un'occhiata da vicino ad alcune delle cose poco conosciute sul posizionamento CSS.
Prima di iniziare, esaminiamo brevemente le basi dei diversi tipi di posizionamento.
Panoramica dei metodi di posizionamento disponibili La proprietà position CSS determina il tipo di posizionamento di un elemento.
Opzioni di posizionamento static è il valore predefinito della proprietà di posizionamento. Segnaliamo che questo elemento non utilizza il posizionamento - il posizionamento viene applicato solo se imposti un tipo di posizionamento diverso da quello predefinito.
Per fare ciò, imposta la proprietà position su uno dei seguenti valori:
parente assoluto fisso appiccicoso
E solo dopo aver impostato il posizionamento, puoi utilizzare le proprietà che compensano l'elemento:
Giusto parte inferiore Il valore iniziale per queste proprietà è la parola chiave auto.
Va tenuto presente che se un elemento ha la proprietà position impostata su absolute o fixed, allora è un elemento posizionato in modo assoluto. Inoltre, per gli elementi posizionati, inizia a funzionare la proprietà z-index, che determina l'ordine di sovrapposizione.
Differenze tra i metodi di posizionamento di base Ora, esaminiamo rapidamente tre differenze fondamentali tra i tipi di posizionamento disponibili:
gli elementi posizionati in modo assoluto vengono completamente rimossi dal flusso e i loro vicini più prossimi prendono il loro posto. relativamente posizionati (relativi) e incollati (appiccicosi) mantengono il loro posto nel ruscello e i loro vicini più prossimi non lo occupano. Tuttavia, l'imbottitura di questi elementi non occupa spazio, ma viene completamente ignorata da altri elementi e ciò può comportare la sovrapposizione di elementi. gli elementi fissi (e il posizionamento fisso è una sorta di assoluto) sono sempre posizionati rispetto alla finestra (ignorando il posizionamento dell'antenato), mentre gli elementi incollati sono posizionati rispetto all'antenato di scorrimento più vicino (overflow: auto). E solo in assenza di tali antenati, sono posizionati rispetto alla zona di visibilità.
Questo può essere visto più in dettaglio nella demo:
Nota: il posizionamento degli "elementi colla" è ancora una tecnologia sperimentale con un supporto browser limitato. Naturalmente, se lo desideri, puoi utilizzare il polyfill per aggiungere questa funzionalità al browser, ma data la sua bassa prevalenza, questa proprietà non verrà discussa in questo articolo.
Elementi di posizionamento con tipo di posizionamento assoluto Sono sicuro che la maggior parte delle persone sa come funziona il posizionamento assoluto. Tuttavia, molte cose al riguardo possono confondere i principianti.
Così ho deciso di iniziare con questo descrivendo le caratteristiche di posizionamento poco conosciute.
Quindi, un elemento posizionato in modo assoluto è sfalsato dal suo antenato posizionato più vicino. Ovviamente, questo funziona se uno degli antenati ha una posizione diversa da statica - se l'elemento non ha antenati posizionati, è spostato dalla finestra.
Ciò è dimostrato dal seguente esempio:
In questa demo, la casella verde è inizialmente posizionata con margini assolutamente zero bottom: 0 e left: 0, il suo antenato (casella rossa) non è stato posizionato affatto.
Tuttavia, abbiamo posizionato relativamente l'involucro esterno (un elemento jumbotron). Nota come cambia il posizionamento del riquadro verde quando cambia il tipo di posizionamento dei suoi antenati.
Gli elementi posizionati in modo assoluto ignorano la proprietà float Se applichiamo il posizionamento assoluto o fisso a un elemento flottato, la proprietà float verrà impostata su none. Se invece impostiamo il posizionamento relativo, l'elemento rimarrà flottante.
Dai un'occhiata alla demo corrispondente:
In questo esempio, definiamo due elementi diversi per galleggiare a destra. Si noti che quando la casella rossa viene posizionata in modo assoluto, ignora il valore float, mentre la casella verde relativamente posizionata mantiene il valore float.
Gli elementi in linea posizionati in modo assoluto diventano a livello di blocco Un elemento in linea con posizionamento assoluto o fisso assume le proprietà di un elemento di blocco. Per i dettagli sulla conversione di elementi in linea in elementi di blocco, vedere la tabella.
In questo caso, abbiamo creato due elementi diversi. Il primo (blocco verde) è un elemento di blocco e il secondo (blocco rosso) è un elemento in linea. Inizialmente, è visibile solo il blocco verde.
La casella rossa non è visibile perché le sue proprietà di larghezza e altezza funzionano solo su elementi di blocco e in linea e poiché non ha contenuto, non ha dimensioni.
Quando al blocco rosso viene assegnato un posizionamento assoluto o fisso, diventa blocco e le dimensioni del blocco specificate in esso diventano effettive.
Gli elementi posizionati in modo assoluto non hanno margini compressi Per impostazione predefinita, quando due margini verticali si toccano, vengono uniti in uno uguale al massimo di essi. Questo è chiamato margini di collasso.
Gli elementi posizionati in modo assoluto si comportano in modo simile agli elementi flottanti: il loro padding non viene unito a quelli adiacenti.
In questa demo, l'elemento è impostato su un rientro di 20 pixel. Il suo padding collassa con il padding dell'elemento genitore, che è anch'esso di 20 pixel. Come puoi vedere, solo con il posizionamento assoluto, non si verifica alcun collasso.
Ma come possiamo evitare che l'imbottitura crolli? Dobbiamo mettere una sorta di separatore tra di loro.
Può essere padding o border e può essere applicato sia a elementi padre che a elementi figlio. Un'altra opzione è aggiungere un clearfix all'elemento genitore.
Posizionamento di elementi con pixel e percentuali Hai mai usato le percentuali invece dei pixel per posizionare gli elementi? Se la risposta è sì, allora sai che l'offset dell'elemento dipende dalle unità di misura selezionate (pixel o percentuale).
Questo è un po' imbarazzante, vero? Quindi, per prima cosa, vediamo cosa dice la specifica sull'offset in percentuale:
Offset come percentuale della larghezza (per sinistra e destra) o dell'altezza (superiore o inferiore) del riquadro principale. Per gli elementi incollati, l'offset viene calcolato come percentuale della larghezza (per sinistra e destra) o dell'altezza (superiore o inferiore) del flusso. Sono ammessi valori negativi.
Come accennato, quando si specifica un offset in percentuale, la posizione di un elemento dipende dalla larghezza e dall'altezza del suo genitore.
La demo mostra questa differenza:
Questo esempio utilizza pixel e percentuali per l'offset. Ovviamente, quando imposti l'offset in pixel, l'elemento viene spostato dove deve essere.
E se scegliamo una percentuale per l'offset, il risultato dipenderà dalla dimensione dell'elemento genitore. Ecco una visualizzazione che mostra come viene calcolata la nuova posizione:
Nota: come probabilmente saprai, la proprietà di trasformazione (insieme a varie funzioni di traduzione) ti consente anche di modificare la posizione di un elemento. Ma in questo caso, quando si utilizzano le percentuali, il calcolo si baserà sulla dimensione dell'elemento stesso e non sul suo genitore.
Conclusione Spero che questo articolo ti abbia aiutato a comprendere meglio il posizionamento CSS e abbia chiarito le complessità sottostanti.
