Il posizionamento è uno dei concetti chiave nella disposizione dei blocchi. Dopo averlo affrontato, molte cose ti saranno chiare e il layout si trasformerà dallo sciamanesimo in un processo significativo. Quindi, questo articolo si concentrerà sulle proprietà CSS. posizione e galleggiante.
1 posizione: statica
Per impostazione predefinita, tutti gli elementi della pagina sono posizionati staticamente (posizione: statico), il che significa che l'elemento non è posizionato e appare nel documento nella sua posizione abituale, cioè nello stesso ordine del markup html.
Non è necessario assegnare in modo specifico questa proprietà a nessun elemento, a meno che non sia necessario modificare una posizione precedentemente impostata come predefinita.
#content( posizione: statico; )
2.posizione: relativa
Il posizionamento relativo (posizione: relativo) consente di utilizzare le proprietà superiore, inferiore, sinistra e destra per posizionare un elemento rispetto a dove apparirebbe nel posizionamento normale.
Spostiamo #content 20px in basso e 40px a sinistra:
#content( posizione: relativa; in alto: 20px; a sinistra: -40px; )
Nota che ora c'è uno spazio vuoto dove avrebbe dovuto trovarsi il nostro blocco #content. Dopo il blocco #content, il blocco #footer non è stato spostato verso il basso perché #content ha ancora il suo posto nel documento anche se lo abbiamo spostato.
A questo punto, potrebbe non sembrare che il posizionamento relativo sia molto utile, ma non saltare alle conclusioni, più avanti nell'articolo imparerai a cosa serve.
3. posizione: assoluta
Con il posizionamento assoluto (posizione: assoluto), l'elemento viene rimosso dal documento e appare dove lo dici.
Ad esempio, spostiamo il blocco #div-1a nell'angolo in alto a destra della pagina:
#div-1a ( posizione:assoluta; alto:0; destra:0; larghezza:200px; )
Nota che questa volta, poiché il blocco #div-1a è stato rimosso dal documento, gli elementi rimanenti sulla pagina sono posizionati in modo diverso: #div-1b, #div-1c e #footer sono stati spostati fino alla posizione del blocco rimosso. E il blocco #div-1a stesso si trova esattamente nell'angolo in alto a destra della pagina.
Possiamo quindi posizionare qualsiasi elemento relativo alla pagina, ma questo non basta. In realtà, dobbiamo posizionare #div-1a rispetto al blocco di #content padre. E a questo punto, torna in gioco il posizionamento relativo.
4. posizione: fissa
Il posizionamento fisso (posizione: fissa) è un sottoinsieme del posizionamento assoluto. La sua unica differenza è che è sempre nell'area visibile dello schermo e non si muove durante lo scorrimento della pagina. In questo senso, è un po' come un'immagine di sfondo fissa.
#div-1a ( posizione:fissa; in alto:0; destra:0; larghezza:200px; )
In IE con posizione: fissa, non tutto è liscio come vorremmo, ma c'è molti modi aggirare queste restrizioni.
5. posizione:relativa + posizione:assoluta
Dando al blocco #content il posizionamento relativo (posizione: relativo), possiamo posizionare qualsiasi elemento figlio rispetto ai suoi bordi. Mettiamo un blocco #div-1a nell'angolo in alto a destra del blocco #content.
#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; )
6. Due colonne
Forte delle conoscenze dei passaggi precedenti, puoi provare a creare due colonne utilizzando il posizionamento relativo e assoluto.
#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; ) #div-1b ( position:absolute; top:0; left:0; width:200px ; )
Uno dei vantaggi del posizionamento assoluto è la possibilità di posizionare gli elementi in un ordine arbitrario, indipendentemente da come si trovano nel markup. Nell'esempio sopra, il blocco #div-1b viene posizionato prima del blocco #div-1a.
E ora dovresti avere una domanda: "Dove sono finiti gli altri elementi del nostro esempio?". Sono scomparsi sotto blocchi assolutamente posizionati. Fortunatamente, c'è un modo per risolvere questo problema.
7. Due colonne ad altezza fissa
Una soluzione è dare un'altezza fissa al contenitore che contiene le colonne.
#content ( position:relative; height: 450px; ) #div-1a ( position:absolute; top:0; right:0; width:200px; ) #div-1b ( position:absolute; top:0; left:0 ;larghezza:200px; )
La soluzione non è molto adatta, dal momento che non sappiamo mai in anticipo quale dimensione verrà posizionato il testo nelle colonne e quale carattere verrà utilizzato.
8. Galleggiante
Per le colonne ad altezza variabile, il posizionamento assoluto non è adatto, quindi esaminiamo un'altra opzione.
Assegnando un float al blocco, lo spingiamo il più possibile sul bordo destro (o sinistro) e il testo che segue il blocco lo avvolgerà. Di solito questa tecnica viene utilizzata per le immagini, ma la useremo per un compito più complesso, poiché è l'unico strumento che abbiamo a nostra disposizione.
#div-1a ( float:left; width:200px; )
9. Colonne mobili
Se assegniamo float: sinistra al primo blocco e poi float: sinistra al secondo, ciascuno dei blocchi verrà premuto sul bordo sinistro e otterremo due colonne, con un'altezza variabile.
#div-1a ( float:left; width:150px; ) #div-1b ( float:left; width:150px; )
Inoltre, puoi assegnare il valore float opposto alle colonne, in questo caso verranno distribuite lungo i bordi del contenitore.
#div-1a ( float:right; width:150px; ) #div-1b ( float:left; width:150px; )
Ma ora abbiamo un altro problema: le colonne vanno oltre il contenitore padre, interrompendo così l'intero layout. Questo è il problema più comune per i progettisti di layout principianti, anche se può essere risolto abbastanza semplicemente.
10. Cancella il galleggiante
La pulizia del galleggiante può essere eseguita in due modi. Se c'è un altro blocco dopo le colonne, è sufficiente assegnare clear: entrambi.
#div-1a ( float:left; width:190px; ) #div-1b ( float:left; width:190px; ) #div-1c ( clear:both; )
Oppure assegna la proprietà overflow: hidden al contenitore padre
#contenuto ( overflow:nascosto; )
In ogni caso, il risultato sarà lo stesso.
Conclusione
Oggi sono state considerate solo le tecniche di posizionamento di base e gli esempi più semplici. Inoltre, per aiutare i designer di layout principianti, consiglio sempre una serie di articoli di Ivan Sagalaev, che un tempo mi ha aiutato molto.
Una delle cose migliori dei CSS è che gli stili ci danno la possibilità di posizionare contenuti ed elementi su una pagina in quasi tutti i modi immaginabili. Questo dà struttura al nostro design e aiuta a rendere il contenuto più visivo.
Esistono diversi tipi di posizionamento nei CSS, ognuno dei quali ha il proprio ambito. In questo capitolo, daremo un'occhiata ad alcuni casi d'uso diversi: creazione di layout riutilizzabili e posizionamento unico di elementi usa e getta, oltre a descrivere alcune tecniche per farlo.
Posizionamento tramite galleggiante
Un modo per posizionare gli elementi in una pagina è tramite la proprietà float. Questa proprietà è abbastanza versatile e può essere applicata in molti modi.
In sostanza, la proprietà float prende un elemento, lo rimuove dal flusso normale della pagina e lo posiziona a sinistra oa destra dell'elemento padre. Tutti gli altri elementi della pagina si avvolgeranno attorno a tale elemento. Ad esempio, i paragrafi si avvolgeranno attorno a un'immagine se l'elemento lo ha la proprietà float è impostata.
Quando la proprietà float viene applicata a più elementi contemporaneamente, consente di creare un layout con elementi float uno accanto o di fronte all'altro, come mostrato in un layout a più colonne.
La proprietà float accetta diversi valori, i due più popolari sono left e right , che consentono a un elemento di essere posizionato a sinistra oa destra del suo genitore.
Img ( float: sinistra; )
galleggiare in pratica
Creiamo un layout di pagina generale con un'intestazione in alto, due colonne al centro e un piè di pagina in basso. Idealmente, questa pagina dovrebbe essere contrassegnata con elementi
Demo di layout senza float
Qui gli elementi
Sezione ( float: sinistra; ) lato ( float: destra; )
Per riferimento, gli elementi mobili sono posizionati sul bordo dell'elemento padre. Se non è presente alcun genitore, l'elemento mobile verrà posizionato sul bordo della pagina.
Quando facciamo fluttuare un elemento, lo rimuoviamo dal flusso normale del documento HTML. Ciò fa sì che la larghezza di quell'elemento venga impostata per impostazione predefinita sulla larghezza del suo contenuto. A volte, ad esempio quando creiamo colonne per un layout riutilizzabile, questo comportamento non è desiderato. Questo problema può essere risolto aggiungendo una proprietà di larghezza del valore fisso per ciascuna colonna. Inoltre, per evitare che gli elementi mobili si tocchino tra loro, con il risultato che il contenuto di un elemento è accanto a un altro, possiamo usare la proprietà margin per impostare lo spazio tra gli elementi.
Di seguito espandiamo il blocco di codice precedente aggiungendo un margine e una larghezza per ciascuna colonna per modellare meglio il risultato desiderato.
Sezione ( float: sinistra; margine: 0 1,5%; larghezza: 63%; ) a lato ( float: destra; margine: 0 1,5%; larghezza: 30%; )
Layout demo con float
float possono modificare il valore di visualizzazione di un elemento
Per un elemento mobile, è anche importante comprendere che l'elemento viene rimosso dal normale flusso della pagina e che il valore visualizzato dell'elemento può cambiare dal suo valore predefinito. La proprietà float si basa sul valore di visualizzazione dell'elemento impostato su block e può modificare il valore di visualizzazione predefinito dell'elemento se non è già visualizzato come elemento di blocco.
Ad esempio, un elemento la cui visualizzazione è impostata su inline , come inline , ignora qualsiasi proprietà di altezza o larghezza. Tuttavia, se si specifica un float per un elemento inline, il valore visualizzato cambierà in block e quindi l'elemento può già assumere le proprietà height o width.
Quando facciamo fluttuare un elemento, dobbiamo essere consapevoli di come influisce sul valore della proprietà display.
Per due colonne puoi float , una colonna come sinistra e l'altra come destra , ma per più colonne dovremo cambiare il nostro approccio. Supponiamo, ad esempio, di voler avere una riga di tre colonne tra i nostri elementi
Per organizzare questi tre elementi
Sezione ( float: sinistra; margine: 0 1,5%; larghezza: 30%; )
Qui abbiamo tre colonne, tutte con lo stesso valore di larghezza e margine e con un float impostato su left .
Demo di layout a tre colonne con float
Pulizia e contenuto mobile
La proprietà float è stata originariamente progettata per consentire al contenuto di fluire attorno alle immagini. Un'immagine può essere spostata e tutto il contenuto attorno a quell'immagine si avvolge naturalmente attorno ad essa. Sebbene funzioni alla grande per le immagini, la proprietà float non è stata pensata per essere utilizzata per scopi di layout e posizionamento e quindi presenta alcune insidie.
Una di queste insidie è che a volte gli stili appropriati non vengono visualizzati su un elemento che si trova accanto o padre dell'elemento float. Quando un elemento viene spostato, viene rimosso dal normale flusso della pagina e, di conseguenza, gli stili degli elementi attorno a quell'elemento mobile possono essere influenzati negativamente.
Spesso i valori delle proprietà del margine e del riempimento vengono interpretati erroneamente, facendoli fondere nell'elemento mobile. Potrebbero essere interessate anche altre proprietà.
Un altro errore è che a volte il contenuto indesiderato avvolgerà l'elemento float. La rimozione di un elemento dal flusso di documenti consente a tutti gli elementi attorno all'elemento mobile di ignorarlo e utilizzare lo spazio disponibile attorno all'elemento mobile, cosa spesso indesiderabile.
Nel nostro precedente esempio a due colonne, dopo aver flottato gli elementi
Layout demo senza cancellare il float
Per evitare che il contenuto si avvolga attorno agli elementi float, è necessario cancellare il float e riportare la pagina al suo flusso normale. Vedremo come cancellare i float e poi daremo un'occhiata al loro contenuto.
Cancellare un galleggiante
La cancellazione di un float viene eseguita con la proprietà clear, che assume diversi valori: i valori più comunemente usati sono left, right ed entrambi.
Div (chiaro: sinistro; )
Il valore di sinistra cancella i float di sinistra, mentre il valore di destra cancella i float di destra. Un valore di entrambi , tuttavia, cancella i float sinistro e destro ed è spesso la scelta più ideale.
Tornando al nostro esempio precedente, se utilizziamo la proprietà clear con un valore di entrambi su un elemento
Piè di pagina (chiaro: entrambi; )
Demo del layout con cancellazione del float
contenuto galleggiante
Invece di cancellare il float, un'altra opzione consiste nell'impostare il contenuto del float. Il risultato è praticamente lo stesso, ma il contenuto float assicura davvero che tutti i nostri stili vengano visualizzati correttamente.
Per impostare il contenuto su float , gli elementi float devono trovarsi all'interno di un elemento padre, agirà come un contenitore, lasciando il flusso del documento completamente normale al di fuori di esso. Gli stili per questo elemento genitore presentano la classe gruppo, come mostrato qui:
Group::before, .group::after ( contenuto: ""; display: tabella; ) .group::after ( cancella: entrambi; ) .group ( cancella: entrambi; *zoom: 1; )
Non c'è molto da fare qui, ma fondamentalmente tutto ciò che fa CSS è cancellare tutti gli elementi mobili all'interno dell'elemento gruppo e riportare il documento al flusso normale.
Più specificamente, gli pseudo-elementi ::before e ::after, come discusso nella Lezione 4, generano dinamicamente elementi sopra e sotto un elemento con class group . Questi elementi non includono alcun contenuto e vengono visualizzati come elementi di tabella, simili agli elementi di blocco. L'elemento generato dinamicamente dopo l'elemento gruppo cancella il float all'interno dell'elemento gruppo, proprio come clear prima. Infine, l'elemento group cancella anche eventuali float che potrebbero apparire prima di esso, nel caso in cui sia presente un float sinistro o destro. Qui è incluso anche un piccolo trucco che fa funzionare bene i browser più vecchi.
C'è più codice qui rispetto al singolo clear: entrambi i comandi, ma può essere abbastanza utile.
Considerando il nostro layout di pagina a due colonne, potremmo avvolgere
Group::before, .group::after ( contenuto: ""; display: tabella; ) .group::after ( cancella: entrambi; ) .gruppo ( cancella: entrambi; *zoom: 1; ) sezione ( float: sinistra ; margine: 0 1,5%; larghezza: 63%; ) a parte ( float: destra; margine: 0 1,5%; larghezza: 30%; )
Demo di layout con contenuto float
La tecnica mostrata qui è nota come "clearfix" e si trova spesso su altri siti con il nome di classe clearfix o cfr. Abbiamo scelto di utilizzare il gruppo nome classe perché rappresenta un gruppo di elementi ed esprime meglio il contenuto.
Quando gli elementi vengono spostati, è importante osservare come influiscono sul flusso della pagina e assicurarsi che il flusso della pagina venga reimpostato cancellando o tramite il contenuto mobile, a seconda dei casi. In caso contrario, il monitoraggio dei float può causare molti mal di testa, specialmente su pagine che contengono più righe, ciascuna con più colonne.
In pratica
Torniamo al sito di Styles Conference e proviamo ad aggiungere float ad alcuni contenuti.
- Per prima cosa, prima di applicare float a qualsiasi elemento, forniamo contenuto per questi elementi float aggiungendo un clearfix al nostro CSS. Nel file main.css, appena sotto i nostri stili di griglia, aggiungeremo un clearfix sotto il nome della classe del gruppo, come prima. /* ======================================== Clearfix ======================================================== == =============================== */ .group::prima, .group::after ( contenuto: " "; display : tabella; ) .group::after ( cancella: entrambi; ) .group ( cancella: entrambi; *zoom: 1; )
Ora che possiamo usare float , impostiamolo su main
all'interno dell'elemento come a sinistra e lascia che il resto del contenuto nell'intestazione lo avvolga a destra.Per fare ciò, aggiungi la classe logo all'elemento
. Quindi, all'interno del nostro CSS, aggiungiamo una nuova sezione di stile per l'intestazione principale. In questa sezione selezioneremo un elemento con la classe logo e imposta il float a sinistra .
Conferenza sugli stili
/* ======================================== Titolo principale ====== == ================================================= */ .logo ( float: sinistra; )Già che siamo qui, aggiungiamo qualche dettaglio in più al nostro logo. Iniziamo con il posizionamento degli elementi
o un'interruzione di riga tra le parole "Stili" e "Conferenza" per forzare il testo del nostro logo su due righe.
In CSS, aggiungiamo un bordo nella parte superiore del nostro logo e un'imbottitura verticale per far respirare liberamente il logo.
stili
Conferenza
Logo ( bordo superiore: 4px solido # 648880; riempimento: 40px 0 22px 0; float: sinistra; )
Dal momento che abbiamo creato un elemento
floated, vogliamo impostare il contenuto su float . parente prossimo a è l'elemento , quindi aggiungeremo una classe di gruppo. Questo applicherà gli stili clearfix che abbiamo impostato in precedenza.
...
Elemento prende forma, quindi diamo un'occhiata all'elemento
A differenza dell'elemento , tuttavia, non applicheremo la classe direttamente all'elemento float. Questa volta aggiungeremo una classe al genitore dell'elemento float e useremo un selettore CSS univoco per selezionare l'elemento e quindi float.
Iniziamo aggiungendo la classe primary-footer all'elemento
Ora che la classe primary-footer è impostata sull'elemento
/* ======================================== Seminterrato principale ====== == ========================================= */ .primary-footer piccolo ( float: left; ) Per testare - qui selezioniamo un elemento , che deve trovarsi all'interno di un elemento con un valore di attributo class di primary-footer , come il nostro elemento
Infine, aggiungiamo un po' di riempimento nella parte superiore e inferiore dell'elemento.
Primary-footer (padding-bottom: 44px; padding-top: 44px; )
Per fare ciò, aggiungi la classe logo all'elemento
. Quindi, all'interno del nostro CSS, aggiungiamo una nuova sezione di stile per l'intestazione principale. In questa sezione selezioneremo un elemento con la classe logo e imposta il float a sinistra .
Conferenza sugli stili
/* ======================================== Titolo principale ====== == ================================================= */ .logo ( float: sinistra; )Già che siamo qui, aggiungiamo qualche dettaglio in più al nostro logo. Iniziamo con il posizionamento degli elementi
o un'interruzione di riga tra le parole "Stili" e "Conferenza" per forzare il testo del nostro logo su due righe.
In CSS, aggiungiamo un bordo nella parte superiore del nostro logo e un'imbottitura verticale per far respirare liberamente il logo.
stili
Conferenza
Logo ( bordo superiore: 4px solido # 648880; riempimento: 40px 0 22px 0; float: sinistra; )
Dal momento che abbiamo creato un elemento
floated, vogliamo impostare il contenuto su float . parente prossimo a è l'elemento , quindi aggiungeremo una classe di gruppo. Questo applicherà gli stili clearfix che abbiamo impostato in precedenza.
...
Elemento prende forma, quindi diamo un'occhiata all'elemento
A differenza dell'elemento , tuttavia, non applicheremo la classe direttamente all'elemento float. Questa volta aggiungeremo una classe al genitore dell'elemento float e useremo un selettore CSS univoco per selezionare l'elemento e quindi float.
Iniziamo aggiungendo la classe primary-footer all'elemento
Ora che la classe primary-footer è impostata sull'elemento
/* ======================================== Seminterrato principale ====== == ========================================= */ .primary-footer piccolo ( float: left; ) Per testare - qui selezioniamo un elemento , che deve trovarsi all'interno di un elemento con un valore di attributo class di primary-footer , come il nostro elemento
Infine, aggiungiamo un po' di riempimento nella parte superiore e inferiore dell'elemento.
Primary-footer (padding-bottom: 44px; padding-top: 44px; )
Elemento
A differenza dell'elemento
Iniziamo aggiungendo la classe primary-footer all'elemento
Ora che la classe primary-footer è impostata sull'elemento
/* ======================================== Seminterrato principale ====== == ========================================= */ .primary-footer piccolo ( float: left; )Per testare - qui selezioniamo un elemento , che deve trovarsi all'interno di un elemento con un valore di attributo class di primary-footer , come il nostro elemento
Infine, aggiungiamo un po' di riempimento nella parte superiore e inferiore dell'elemento.
Primary-footer (padding-bottom: 44px; padding-top: 44px; )
Con tutti questi cambiamenti negli elementi
Riso. 5.01. Con più float, elementi
Posizionamento tramite blocco in linea
Oltre a usare float , un altro modo per posizionare il contenuto consiste nell'usare la proprietà display in combinazione con il valore inline-block. Il metodo inline-block, come discuteremo in seguito, è utile principalmente per il layout di pagina o per posizionare elementi in una riga uno accanto all'altro.
Ricordiamo che il valore inline-block per la proprietà display disegna gli elementi in una linea e consente loro di assumere tutte le proprietà del modello box, inclusi height , width , padding , border e margin . L'uso del blocco in linea ci consente di sfruttare appieno il modello box senza doverci preoccupare di ripulire eventuali float.
blocco in linea in pratica
Diamo un'occhiata al nostro esempio a tre colonne dall'inizio. Inizieremo mantenendo il nostro HTML in questo modo:
Ora invece di float per i nostri tre elementi
Sezione ( display: blocco in linea; margine: 0 1,5%; larghezza: 30%; )
Sfortunatamente, questo codice da solo non è sufficiente per fare il trucco e l'ultimo elemento
Dimostrazione di elementi inline-block con spazio
Rimozione dello spazio tra gli elementi inline-block
Esistono diversi metodi per rimuovere lo spazio tra gli elementi inline-block e alcuni sono più complessi di altri. Ci concentreremo su due dei metodi più semplici, entrambi all'interno di HTML.
La prima soluzione è inserire ogni nuovo tag di apertura dell'elemento
Scrivere elementi inline-block in questo modo garantisce che non ci sia spazio tra tali elementi in HTML. Pertanto, lo spazio non verrà visualizzato durante il rendering della pagina.
Dimostrazione di elementi inline-block senza spazi
Un altro metodo per rimuovere lo spazio tra gli elementi inline-block consiste nell'aprire un commento HTML subito dopo il tag di chiusura dell'elemento. Quindi chiudi il commento immediatamente prima del tag di apertura dell'elemento successivo. Ciò consente agli elementi inline di iniziare e terminare su righe separate in HTML e "commenterà" qualsiasi potenziale spazio tra gli elementi. Di conseguenza, il codice sarà simile a questo:
Nessuna di queste opzioni è perfetta, ma sono utili. Sono propenso a utilizzare i commenti per una migliore organizzazione, ma quale opzione scegliere dipende interamente da te.
Crea layout riutilizzabili
Quando si crea un sito, è sempre meglio scrivere stili modulari che possono essere riutilizzati altrove e i layout riutilizzabili sono in cima all'elenco dei codici riutilizzabili. I layout possono essere creati con elementi float o inline-block, ma quale funziona meglio e perché?
Se gli elementi float o inline-block siano migliori per la struttura della pagina è aperto al dibattito. Il mio approccio consiste nell'utilizzare elementi inline-block per creare una griglia o un layout di pagina, quindi utilizzare float quando voglio che il contenuto scorra attorno a quell'elemento (che è ciò per cui i float sono stati progettati quando si lavora con le immagini). In generale, trovo anche più facile lavorare con gli elementi inline-block.
Tuttavia, usa ciò che funziona meglio per te. Se hai più familiarità con un approccio rispetto all'altro, usalo.
Sono attualmente in lavorazione nuove specifiche CSS, in particolare le proprietà flex e grid, per aiutarti a decidere come disporre al meglio le tue pagine. Tieni d'occhio questi metodi quando iniziano a comparire.
In pratica
Con una solida conoscenza dei layout riutilizzabili, è ora di presentarne uno al nostro sito Styles Conference.
Per il sito Web di Styles Conference, creeremo un layout a tre colonne utilizzando elementi inline-block. Lo faremo in questo modo per ottenere tre colonne della stessa larghezza o due colonne con una larghezza totale divisa tra loro come 2/3 per una e 1/3 per l'altra.
Per cominciare, creeremo classi che definiscono la larghezza di queste colonne. Chiameremo queste due classi col-1-3 per un terzo e col-2-3 per due terzi. Nella sezione Griglia del nostro file main.css, andiamo avanti e definiamo queste classi e le loro larghezze corrispondenti.
Col-1-3 (larghezza: 33,33%; ) .col-2-3 (larghezza: 66,66%; )
Vogliamo che entrambe le colonne vengano visualizzate come elementi di blocco in linea. Dobbiamo anche assicurarci che siano allineati verticalmente alla parte superiore di ogni colonna.
Creiamo due nuovi selettori che condividono display e vertical-align .
Col-1-3, .col-2-3 ( display: inline-block; vertical-align: in alto; )
Dai un'occhiata di nuovo ai CSS. Abbiamo creato due selettori di classe col-1-3 e col-2-3 separati da una virgola. Una virgola alla fine del primo selettore significa che è seguito da un altro selettore. Il secondo selettore è seguito da una parentesi graffa di apertura, che indica che la dichiarazione di stile sta per iniziare. Con una virgola che separa i selettori, possiamo associare uno stile a più selettori contemporaneamente.
Vogliamo mettere un po' di spazio tra le colonne per aiutare a suddividere il contenuto. Questo può essere fatto aggiungendo un riempimento orizzontale a ciascuna colonna.
Funziona bene, tuttavia, quando due colonne sono una accanto all'altra, la larghezza dello spazio tra loro sarà doppia rispetto allo spazio dal bordo esterno. Per bilanciare questo, metteremo tutte le nostre colonne in una griglia e aggiungeremo lo stesso riempimento.
Usiamo la classe grid per definire la nostra griglia e quindi diamo lo stesso riempimento orizzontale alle classi grid , col-1-3 e col-2-3. Con le virgole che separano nuovamente i nostri selettori, il nostro CSS si presenta così:
Griglia, .col-1-3, .col-2-3 (padding-left: 15px; padding-right: 15px; )
Quando impostiamo il riempimento orizzontale dobbiamo fare attenzione. Ricorda, nell'ultimo tutorial abbiamo creato un contenitore con la classe contenitore centrata su tutto il nostro contenuto nella pagina con una larghezza di 960 pixel. In questo momento, se dovessimo inserire un elemento della griglia all'interno di un elemento contenitore, i loro padding orizzontali si accumulerebbero e le nostre colonne non verrebbero visualizzate proporzionalmente alla larghezza del resto della pagina.
Lo faremo suddividendo il vecchio set di regole del contenitore nel seguente:
Container, .grid ( margin: 0 auto; width: 960px; ) .container ( padding-left: 30px; padding-right: 30px; )
Ora qualsiasi elemento con contenitore di classe o griglia sarà largo 960 px e centrato sulla pagina. Inoltre, abbiamo mantenuto il riempimento orizzontale esistente per qualsiasi elemento contenitore spostandolo in un nuovo insieme separato di regole.
Ok, tutta la parte difficile necessaria per impostare la griglia è terminata. Ora è il momento di lavorare con il nostro HTML e vedere come funzionano queste classi.
Inizieremo con i teaser nella pagina principale, nel file index.html, allineati in tre colonne. I teaser sono attualmente racchiusi con un elemento
...
... ... ...
E infine, poiché ciascuna delle nostre colonne è un elemento inline-block, dobbiamo assicurarci di rimuovere lo spazio bianco tra di loro. Per fare ciò, utilizzeremo i commenti e aggiungeremo della documentazione a ciascuna sezione per organizzare al meglio il nostro codice.
... ... ...
Per verifica, alla riga 3 abbiamo lasciato un commento che identifica la sezione "Relatori" che la segue. Alla fine della riga 7, apriamo il commento subito dopo il tag di chiusura. All'interno di questo commento, alla riga 9, definiamo la prossima sezione "Programma". Quindi chiudiamo il commento all'inizio della riga 11, appena prima del tag di apertura
Ora abbiamo una griglia riutilizzabile a 3 colonne che supporta layout diversi utilizzando larghezze di 1/3 e 2/3 colonne. La nostra pagina principale ora contiene tre colonne, che separano tutti i teaser.
Riso. 5.02. La home page di Styles Conference ora include un layout a tre colonne
Demo e codice sorgente
Di seguito puoi visualizzare il sito di Styles Conference nel suo stato attuale, nonché scaricare il codice sorgente corrente per il sito.
Posizionamento unico degli elementi
Prima o poi tutti vorranno posizionare con precisione un elemento, ma gli elementi float o inline-block non ti permettono di fare questo trucco. Gli elementi mobili, che rimuovono un elemento dal flusso della pagina, producono spesso risultati indesiderati perché gli elementi circostanti fluttuano attorno all'elemento mobile. Gli elementi inline-block, a meno che non stiamo creando colonne, possono essere piuttosto scomodi quando si tratta di un corretto posizionamento. Per situazioni come questa, possiamo usare la proprietà position insieme alle proprietà offset del box.
La proprietà position determina come l'elemento viene posizionato sulla pagina e se verrà visualizzato nel flusso normale del documento. Viene utilizzato insieme alle proprietà di offset del riquadro top , right , bottom e left , che specificano esattamente dove verrà posizionato l'elemento spostando l'elemento in direzioni diverse.
Per impostazione predefinita, ogni elemento ha il suo valore di posizione impostato su static , il che significa che l'elemento esiste nel normale flusso del documento e non richiede alcuna proprietà per compensarlo. Il valore statico è spesso sovrascritto dal valore relativo o assoluto, che vedremo in seguito.
Posizionamento relativo
Il valore relativo per la proprietà position consente agli elementi di apparire nel normale flusso della pagina, riservando spazio all'elemento come previsto e impedendo ad altri elementi di fluire attorno ad esso. Tuttavia, consente anche di modificare la posizione dell'elemento utilizzando le proprietà di offset. Ad esempio, considera i seguenti HTML e CSS:
Div ( altezza: 100px; larghezza: 100px; ) .offset ( a sinistra: 20px; posizione: relativa; in alto: 20px; )
Dimostrazione di posizionamento relativo
Qui per il secondo elemento
Per elementi posizionati relativamente, è importante sapere che le proprietà di offset del box determinano dove verrà spostato l'elemento, data la sua posizione originale. Quindi una proprietà left di 20 pixel spinge effettivamente l'elemento a destra di 20 pixel. Una proprietà top di 20 pixel spingerà quindi l'elemento verso il basso di 20 pixel.
Quando posizioniamo un elemento utilizzando le proprietà offset, l'elemento si sovrappone all'elemento sottostante invece di spingerlo verso il basso come fanno le proprietà margin o padding.
Posizionamento assoluto
Il valore assoluto per la proprietà position differisce dal valore relativo in quanto un elemento posizionato in modo assoluto non compare nel flusso normale del documento e lo spazio e la posizione originali di un elemento posizionato in modo assoluto non sono riservati.
Inoltre, gli elementi posizionati in modo assoluto vengono spostati rispetto al loro elemento padre posizionato relativamente più vicino. Se non esiste un genitore posizionato relativo, l'elemento posizionato in modo assoluto sarà posizionato rispetto all'elemento
. Questa è una piccola informazione; diamo un'occhiata a come funziona all'interno di alcuni codici:
Sezione ( posizione: relativa; ) div ( posizione: assoluta; destra: 20px; in alto: 20px; )
Dimostrazione del posizionamento assoluto
In questo esempio, l'elemento Per elementi posizionati relativamente, le proprietà di offset determinano in quale direzione l'elemento verrà spostato rispetto a se stesso. Per gli elementi posizionati in modo assoluto, le proprietà di offset determinano in quale direzione verrà spostato l'elemento rispetto al suo genitore posizionato relativamente più vicino. Come risultato delle proprietà destra e superiore, l'elemento Dal momento che l'elemento Imparare a posizionare i contenuti in HTML e CSS è un enorme passo avanti verso la padronanza di questi linguaggi. Aggiungete a ciò il modello box e siamo sulla buona strada per diventare sviluppatori front-end. Dall'autore: Saluti. Il posizionamento degli elementi CSS è un argomento molto importante nella creazione di siti Web. In questo articolo, propongo di considerare più in dettaglio tutti i modi per spostare i blocchi all'interno di una pagina web. Se parliamo del posizionamento degli elementi del blocco, viene impostato utilizzando la proprietà position. Ha quattro significati e ciascuno merita una considerazione separata. Questa è la prima specie conosciuta. È impostato in questo modo: posizione: assoluto. Successivamente, il blocco perde le sue solite proprietà e cade completamente fuori dal flusso normale. Cos'è questo flusso? Prova a mettere in fila diversi elementi a livello di blocco nel markup. Come diventeranno? Uno dopo l'altro, e nient'altro. Questo è il comportamento normale dei blocchi per impostazione predefinita. Ma cosa succede a un blocco che ha un posizionamento assoluto definito? 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 posizionare con precisione elementi decorativi, icone e altre chicche. Ora può essere spostato utilizzando le proprietà sinistra, destra, in alto e in basso. Per impostazione predefinita, lo spostamento si verifica rispetto ai bordi della finestra del browser, ma se l'elemento padre è impostato su position: relativo, l'offset si verifica rispetto al blocco padre. Blocco( posizione: assoluta; in basso: 0; a destra: 0; ) Blocca ( posizione: assoluta; in basso: 0 a destra: 0 L'elemento verrà spostato nell'angolo inferiore destro. Noto che questo è spesso il modo in cui fanno il pulsante in alto: lo posizionano semplicemente nell'angolo. Ed 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; in alto: 0; a destra: 10px; ) #involucro( posizione: relativa; Blocca ( posizione: assoluta; superiore: 0; a destra: 10px; In questo esempio, abbiamo prima registrato il posizionamento relativo del contenitore padre (relativo - ne parleremo più avanti nell'articolo), quindi abbiamo impostato la posizione assoluta per lo stesso elemento .block. Di conseguenza, le coordinate non verranno contate dalla finestra del browser stessa, ma dai bordi dell'elemento padre, ovvero il blocco wrapper. Questa è la vista successiva ed è scritta in questo modo: posizione: relativa. Le coordinate sono specificate dalle stesse proprietà della posizione assoluta. L'unica differenza significativa è che l'elemento non esce formalmente dal flusso: c'è spazio per esso. Il funzionamento di questo valore può essere paragonato alla visibilità: nascosto, quando l'elemento è nascosto dalla pagina, ma il posto sottostante rimane intatto. Lo stesso accade con il posizionamento relativo: il blocco può essere spostato ovunque, ma il posto sottostante rimane vuoto e non sarà occupato da altre parti. È anche importante sapere che l'offset non proviene dai bordi della finestra del browser web, ma dal punto in cui si trovava originariamente il blocco. Cioè: Blocca( posizione: relativa; in alto: 10px; a destra: 50px; ) Blocca ( posizione: relativa; in alto: 10px; a destra: 50px Il blocco si sposterà di 50 pixel a destra e di 10 pixel a sinistra. Sicuramente su Internet hai visto più di una volta su siti quando, durante lo scorrimento, un banner non è scomparso, ma ha continuato a essere nella tua zona di visibilità, come se si attaccasse a un punto. Ciò viene principalmente implementato utilizzando il posizionamento fisso. Per fare ciò, devi scrivere: L'ultima vista è statica, che è il comportamento normale degli elementi a livello di blocco. Non ha bisogno di essere scritto, perché è l'impostazione predefinita, ma è comunque necessario conoscere il quarto valore. A volte position: static viene scritto per sovrascrivere un diverso tipo di posizionamento su determinati eventi su una pagina web. Abbiamo considerato i significati, ma questo non basta per chiudere questo argomento per noi stessi. In realtà, devi capire dove e quali tipi di posizionamento devi applicare. Con fixed, ti ho già fornito un esempio: può essere utilizzato per creare barre laterali, intestazioni o piè di pagina appiccicosi. Il posizionamento relativo può aiutare quando è necessario spostare un blocco leggermente rispetto alla sua posizione e allo stesso tempo mantenerlo in posizione nel flusso. È inoltre impostato sui blocchi padre per utilizzare il movimento assoluto per gli elementi figlio. La proprietà position non risolve tutti i problemi con il posizionamento degli elementi di blocco. Come creeresti, ad esempio, una griglia del sito con esso? Non ho buone idee. È qui che le altre funzionalità tornano utili. Con l'aiuto di float in css, vengono spesso create delle griglie. La proprietà consente di spingere il blocco sul bordo sinistro o destro del genitore (float: sinistra, float: destra), consentendo a più elementi di blocco di diventare in una riga, cosa che si verifica molto spesso in qualsiasi sito. La centratura viene eseguita in questo modo: il blocco deve scrivere una certa larghezza, quindi impostare la proprietà margin: 0 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 è necessario inserire l'icona (posizione: assoluta), da qualche parte, correggere leggermente la posizione del blocco, lasciando un posto dietro di esso (posizione: relativa) e dove dovrebbe essere fissato il widget (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 di ricevere nuovi materiali didattici. E ti consiglio anche di guardare il nostro, dove viene sollevato anche un argomento simile. (elementi di posizionamento) Ancora non capisci come funziona il posizionamento assoluto in CSS e perde elementi sullo schermo? Esploriamo questa magia. Considera un codice con quattro div annidati l'uno nell'altro come una bambola. <
body
>
<
div
class
=
"box-1"
>
<
div
class
=
"box-2"
>
<
div
class
=
"box-3"
>
<
div
class
=
"box-4"
>
<
/
div
>
<
/
div
>
<
/
div
>
<
/
div
>
<
/
body
>
Box-1 , box-2 e box-3 sono centrati per la bellezza con il margine: proprietà CSS auto e flex. Il blocco box-4 rimane nella sua posizione predefinita nel flusso di documenti. body ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; margin: auto; ) corpo ( Display: flessibile; casella-1, casella-2, Casella-3 ( Display: flessibile; Margine: automatico; Tutti e 4 gli elementi hanno un posizionamento predefinito. Al momento, il layout si presenta così: Per posizionarsi, un elemento deve sapere due cose: Se definisci position: absolute su box-4 , quell'elemento lascerà il normale flusso del documento. Ma ora rimane al suo posto, poiché le coordinate di offset non sono impostate. Se la larghezza di un elemento non è definita in CSS, sarà uguale alla larghezza del suo contenuto (più padding e bordo). Ora aggiungiamo top: 0 e left: 0 proprietà. L'elemento deve determinare quale contenitore padre sarà l'origine di queste coordinate. Diventa l'elemento più vicino con una posizione non statica (il più delle volte posizione: relativa). box-4 inizia a sondare i suoi antenati uno per uno. Né box-3 , né box-2 , né box-1 sono adatti, poiché hanno un posizionamento in CSS per impostazione predefinita (non impostato). Se non viene trovato alcun antenato posizionato, l'elemento viene posizionato rispetto al corpo del documento: Se imposti position: relative sull'elemento box-1, sarà il punto di riferimento: Un elemento posizionato in modo assoluto è posizionato rispetto al suo predecessore posizionato più vicino. Una volta trovato un punto di riferimento, tutto ciò che si trova al di sopra di esso nell'albero DOM cessa di avere importanza. Se imposti position: anche rispetto al box-2, allora il box-4 sarà posizionato rispetto ad esso, perché questo antenato è più vicino. Allo stesso modo per il contenitore box-3: Proprietà posizione ha i seguenti significati
Aggiungi un tag vuoto prima del div con class="primer" - . Gli elementi di una pagina web occupano una certa quantità di spazio. Per analogia con le barche nel gioco "Battleship". Tra le navi dovrebbero esserci celle vuote - margine. Per posizionare un elemento sopra un altro, devi impostare un valore negativo per il margine. Ma poi i contenuti dei tag si sovrapporranno. Con l'aiuto della posizione e delle proprietà, salgono al livello 2. In un ordine naturale, i tag inferiori nel codice sono mostrati sopra quelli superiori. Grazie allo z-index al livello 2, puoi determinare tu stesso l'elemento visibile. position: static è l'impostazione predefinita e sovrascrive relative , absolute e fixed . I valori delle proprietà superiore, inferiore, destra, sinistra vengono ignorati. In assenza di trasformazione, non viene nemmeno preso in considerazione lo z-index.
Verrà data priorità al blocco a cui assegniamo posizione: relativo. Il contenuto dell'elemento inferiore è nascosto.
Per posizionare il blocco B sopra C, ma sotto A, non basta assegnare la posizione: rispetto ad esso, poiché nel codice è sotto il blocco A, il che significa che si sovrapporrà ad esso.
È inoltre necessario impostare l'indice z per l'elemento B in modo che sia inferiore a quello del blocco A.
Invece del margine nel posizionamento relativo, a volte è meglio usare le proprietà alto, basso, destra, sinistra. Il punto di partenza per loro è la posizione iniziale dell'elemento. Allo stesso tempo, il blocco B continua a essere posizionato come se il blocco A si trovasse nello stesso posto - lascia spazio vuoto per esso. Pertanto, non puoi evocare con un div () vuoto.
Piena analogia con una proprietà
Gli elementi di margine incorporati non si spostano su e giù (). Solo in alto, in basso
B A B Sembrerebbe che il blocco con posizione: assoluto debba essere sopra posizione: relativo, ma non è questo il caso, qui funziona l'ordine naturale. Ciò significa che z-index ti consentirà di scegliere un elemento prioritario tra di loro.
Il blocco C ignora la posizione iniziale del blocco B, perché con posizione: assoluta e posizione: fissa, l'elemento smette di influenzare i tag adiacenti o tramite la sua larghezza/altezza o float: sinistra.
E ora, per consolidare il materiale, fai clic sui pulsanti all'inizio dell'articolo, pensa al motivo per cui si sono verificati tali cambiamenti.Sommario
Quali sono i tipi
Posizionamento assoluto
Posizionamento relativo degli elementi CSS
Fissazione
Posizione: posizione statica o regolare
Come rendere corretto il posizionamento dei blocchi in CSS?
Altre tecniche: centraggio, blocchi flottanti
Introduzione al posizionamento
Quando imposti position: absolute , non è l'elemento stesso che viene in primo piano, ma il suo contenitore padre, perché CSS è posizionato rispetto ad esso. La parte difficile è che non è sempre il genitore immediato dell'elemento.
.box-4 senza posizionamento A cosa ci stiamo posizionando in relazione?
.box-4 con posizionamento assoluto senza offset 
.box-4 con posizionamento assoluto. Elementi padre senza posizionamento 
.box-4 con posizionamento assoluto. .box-1 con posizionamento relativo 
.box-4 con posizionamento assoluto. .box-2 con posizionamento relativo
statico parente assoluto fisso
Le proprietà vengono applicate solo in combinazione con esso (escl. posizione: statico;)
superiore parte inferiore Giusto sinistra
può essere presente contemporaneamente
margine trasformare float (escl. posizione: assoluta; e posizione: fissa;) introduzione
Posizionamento statico - posizione: statico;
Posizionamento relativo - posizione: relativa;
Per elementi in linea
Posizionamento assoluto e fisso
Tavolo finale
proprietà distintive posizione: statica; posizione: relativa;
trasformare: translate();posizione: assoluta; posizione: fissa;
sovrapposizione gli elementi non devono essere posizionati uno sopra l'altro gli elementi hanno la precedenza sulla visibilità su statico. Altri valori sono equivalenti. Quello che si trova al di sotto del codice sarà visibile o avrà un valore z-index elevato
punto di riferimento in alto, a destra, in basso e a sinistra ignorato la posizione iniziale dell'elemento bordo dell'elemento padre bordo della finestra del browser
elementi intorno tenere conto della posizione attuale dell'elemento tenere conto della posizione iniziale dell'elemento ignora la posizione dell'elemento
larghezza: 100% è la larghezza elemento (per inline)/elemento padre (per blocco) elemento padre con posizione non impostata su statico finestre del browser
sull'elemento di scorrimento della pagina si muove "si attacca" alla posizione specificata nella finestra del browser
