,

,

,

. Etichetta
abbastanza spesso utilizzato nel layout dei siti moderni per creare griglie e significa semplicemente una sorta di blocco o contenitore. È consentito nidificare altre variabili al suo interno, cosa che non è quindi possibile con tutti gli elementi di blocco
comodo da usare. I blocchi sono solitamente impilati uno sopra l'altro e non sono nidificati all'interno di elementi inline. Gli elementi inline HTML sono testo e CSS viene utilizzato per lo stile.
Con una determinata larghezza del contenuto, la larghezza totale del blocco è la somma del riempimento destro e sinistro, dei margini, dei bordi e della larghezza. Data l'altezza - dal riempimento superiore e inferiore, dai margini, dai bordi e dall'altezza. Il testo negli elementi del blocco è allineato a sinistra per impostazione predefinita. Se uno di essi contiene elementi inline insieme a elementi block, viene creato un blocco anonimo attorno agli elementi inline. Utilizzerà lo stile predefinito. Erediterà anche lo stile dato 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. Allo stesso tempo, per impostazione predefinita, i blocchi sono allineati dall'alto verso il basso e i tag inline, se non c'è abbastanza spazio, vengono trasferiti a 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ù è alto, prima si trova. Ciascuno degli elementi del blocco ha l'aspetto di un rettangolo che allontana da sé quelli vicini. È possibile modificare questo comportamento utilizzando proprietà speciali. L'allineamento in CSS di alcune caselle al centro o ai lati del contenitore si chiama posizionamento.
Elementi di posizionamento
La posizione dei blocchi può essere controllata utilizzando il posizionamento assoluto e relativo. Il posizionamento viene utilizzato per assegnare una determinata posizione a grandi sezioni della pagina, per creare interfacce complesse, pop-up ed elementi decorativi. La proprietà principale utilizzata per posizionare i blocchi nei CSS è position. Ha quattro proprietà principali:
• parente;
• assoluto;
• fisso;
• statico.
Con il loro aiuto, puoi cambiare modalità di layout impostando uno dei quattro parametri: in alto, a destra, in basso o a sinistra. C'è anche una proprietà per ordinare i livelli - z-index. Il posizionamento con la proprietà static non viene generalmente utilizzato, poiché indica il posizionamento predefinito dei blocchi. Pertanto, l'utilizzo di qualsiasi parametro non lo pregiudica in alcun modo. Le altre tre proprietà vengono utilizzate per il layout: relativo, assoluto, fisso.
Posizionamento relativo
Il posizionamento relativo dei blocchi in CSS, ovvero la proprietà position: relative, significa che l'elemento può essere spostato e la sua posizione originale cambiata. Tale blocco rimane ancora nel flusso. Infatti, non è lui che viene spostato, ma la sua copia. I valori delle proprietà sono impostati per specificare esattamente di quanto il blocco si sposterà in una direzione o nell'altra. Di solito sono misurati in pixel. Ma è accettabile utilizzare altre unità.

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

Posizionamento assoluto
Il posizionamento assoluto delle caselle nei CSS è dato dal valore assoluto della proprietà position. Un elemento posizionato in modo assoluto esce dal flusso del documento e al suo posto si trovano blocchi adiacenti. La larghezza di un tale elemento viene allungata in base al suo contenuto e può essere spostata impostando determinati valori nelle proprietà in alto, a sinistra, a destra e in basso. Il posizionamento assoluto dei blocchi nei CSS è utile per le intestazioni. Ma position: absolute funziona non solo per gli elementi a blocchi, ma anche per gli elementi inline.
Elementi centrali
Un elemento posizionato assolutamente in linea si comporterà esattamente come un elemento in linea. Pertanto, con l'aiuto del posizionamento, puoi controllare in CSS e testo. Puoi applicarvi alcune nuove proprietà, come 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 in CSS, il contenitore principale deve essere posizionato relativamente e l'elemento da allineare deve essere posizionato in modo assoluto. Il contenitore deve essere impostato in alto: 50%, e per spostare l'elemento a metà della sua stessa altezza, utilizzare la proprietà translate con un valore di "0, -50%". Gli elementi posizionati in modo assoluto possono essere distinti in nuovo tipo, poiché hanno proprietà che non sono disponibili per altri tipi di posizionamento.

Posizionamento relativo all'angolo superiore sinistro del browser
Le proprietà sinistra, in alto, a destra e in basso funzionano in modo diverso con elementi posizionati in modo assoluto e relativo. Per gli elementi relativi, queste proprietà specificano un offset relativo alla posizione dell'elemento. Assolutamente posizionato si svolgono relativamente determinato sistema coordinate legate 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 riempimento verrà misurato dal lato sinistro del browser, ma la barra di scorrimento non verrà visualizzata. La proprietà top, quando è posizionata in modo assoluto, imposta il riempimento dalla parte superiore del browser alla parte superiore dell'elemento a cui è applicata. Combinando entrambe le proprietà, l'elemento può essere spostato rispetto all'angolo superiore sinistro del browser.

Posizionamento relativo all'angolo superiore destro del browser
Allo stesso modo, utilizzando le proprietà destra e in alto, puoi bloccare un elemento sul lato destro della finestra del browser e cambiarne la posizione verticalmente, spostandolo nell'angolo in alto a destra. Se il valore della proprietà destra è negativo, il blocco verrà spostato oltre il bordo della finestra. Successivamente, dovrebbe apparire una barra di scorrimento. Per spostare un elemento in basso, utilizzare la proprietà bottom. Imposta il riempimento dal bordo inferiore della finestra del browser alla parte inferiore del blocco. Un valore negativo fa anche apparire una barra di scorrimento quando l'elemento viene spinto oltre la parte inferiore della finestra del browser.
Sistema di coordinate in posizionamento assoluto
Per impostazione predefinita, tutti gli elementi impostati sulla posizione assoluta sono vincolati allo stesso sistema di coordinate: la finestra del browser. Ma può essere modificato dando ad alcuni elementi padre il posizionamento relativo. Quindi il blocco figlio cambierà la sua posizione a seconda del genitore. Se tra gli elementi genitore ce ne sono diversi con posizionamento relativo, allora il conto alla rovescia è dal più vicino di essi. In questo caso, il posizionamento predefinito sarà quello impostato nel tag body.

Punto di riferimento per un elemento posizionato in modo assoluto
Prima che a un elemento fosse assegnata una posizione assoluta, era in un luogo chiamato origine implicita. Se non imposti le proprietà per un tale blocco, non si sposterà. Puoi spostarlo impostando la proprietà margin. Funziona in modo simile alle proprietà di posizionamento. Se non si definisce il valore della proprietà left e di tutte le altre, sarà uguale ad auto. Inoltre, usando auto, puoi restituire elementi ai tuoi luoghi precedenti.

Posizionamento fisso
Un altro valore è fisso. La proprietà position ancora un elemento a una posizione specifica. Il posizionamento fisso viene spesso utilizzato per creare menu in CSS. È simile all'assoluto, ma il blocco fisso viene eliminato dal flusso. Anche durante lo scorrimento della pagina, tale elemento rimarrà al suo posto, quindi è conveniente utilizzarlo per creare menu in CSS. Il punto di riferimento sarà quindi ancorato alla finestra del browser. Se sono presenti più blocchi posizionati, la proprietà z-index viene utilizzata per disporli. Può essere utilizzato per sostituire i blocchi relativi con quelli assoluti assegnando loro l'indice appropriato, espresso come intero. Più è grande, più alto sarà il blocco.
Il posizionamento è uno di concetti chiave in 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 la posizione precedentemente impostata su default.
#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é il #contenuto 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 per cosa può essere utilizzato.
3. posizione: assoluta
In posizionamento assoluto(posizione: assoluta), 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 lo stesso blocco #div-1a si trova esattamente sulla destra, angolo superiore pagine.
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 capacità di posizionare gli elementi all'interno ordine casuale, 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 di più compito difficile, 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 le colonne di fronte valore float, in questo caso, andranno distribuiti 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 si considerano solo le tecniche di posizionamento di base, e la maggior parte semplici esempi. Inoltre, per aiutare i progettisti di layout principianti, consiglio sempre una serie di articoli di Ivan Sagalaev, che un tempo mi ha aiutato molto.
15.03.2017
Non ancora


Ciao!
Nel tutorial di oggi, ti mostrerò come posizionare un elemento in qualsiasi punto dello schermo usando il posizionamento dei blocchi.
Cosa ci dà il posizionamento dei blocchi? Posizionando i blocchi, il webmaster potrà crearne degli eventuali design unico sito, posizionando i blocchi dove vuole. Per posizionare i blocchi in qualsiasi punto dello schermo, basta specificare le coordinate.
Coordinate in CSS
Proprietà "SUPERIORE» | « SINISTRA» | « GIUSTO» | « PARTE INFERIORE »
Al posizionamento dei blocchi devono essere prescritte le coordinate, cioè dove verrà posizionato il blocco.
Schema del sistema di coordinate:

Le coordinate sono specificate da quattro regole:
• superiore- su;
• sinistra- sinistra;
• Giusto- Giusto;
• parte inferiore- fuori uso.
Sintassi:
Coordinata_regola: coordinata_valore;
Significato:
Specificare il valore in px o in%.
In alto: 100px; /* bordo superiore*/ sinistra:100px; /* bordo sinistro */
È sufficiente specificare le coordinate per due bordi (in alto o in basso, a sinistra oa destra).
Posizionamento in CSS

Proprietà "POSIZIONE »
Il posizionamento viene scritto in CSS tramite la regola "posizione" con il valore desiderato.
Sintassi:
Posizione: valore;
Significato:
• assoluto- assoluto;
• parente- parente;
• fisso- fisso.
Esaminiamo ogni valore.


Significato " ASSOLUTO"
Il posizionamento assoluto consente al webmaster di posizionare blocchi su una pagina web in qualsiasi punto dello schermo. Basta scrivere la regola in CSS " posizione"Con il valore" assoluto"E le coordinate desiderate:
Posizione:assoluta; /* posizionamento assoluto */

Risultato:



Significato "PARENTE »
Il posizionamento relativo consente al webmaster di spostare il blocco sulla pagina web, ma la posizione originale del blocco non viene liberata per un altro elemento. In CSS, scrivi la regola " posizione"Con il valore" relativo"E le coordinate desiderate:
posizione:relativa; /* posizionamento relativo */

CSS sta per Cascading Style Sheets. CSS descrive come gli elementi HTML devono essere visualizzati su schermo, carta o in altri media. I CSS risparmiano molto lavoro. Può controllare il layout di più pagine Web contemporaneamente. I CSS possono essere aggiunti agli elementi HTML in 3 modi: Inline - usando l'attributo style negli elementi HTML Interno - usando un elemento nella sezione Esterno - usando un file CSS esterno Il modo più comune per aggiungere CSS è mantenere il stili in file CSS separati. Tuttavia, qui useremo lo stile in linea e interno, perché è più facile da dimostrare e più facile per te per provarlo tu stesso.
Risultato:

Predefinito

Posizionamento relativo
Posizionamento fisso in CSS

Significato "FISSO"
Il posizionamento fisso consente al webmaster di posizionare i blocchi sulla pagina web in qualsiasi punto dello schermo e durante lo scorrimento della pagina web, il blocco sarà sempre posizionato rispetto alla finestra del browser (sarà sempre visibile sullo schermo). Basta scrivere la regola in CSS " posizione"Con il valore" fisso"E le coordinate desiderate:
posizione:fissa; /* posizionamento fisso */

CSS sta per Cascading Style Sheets. CSS descrive come gli elementi HTML devono essere visualizzati su schermo, carta o in altri media. I CSS risparmiano molto lavoro. Può controllare il layout di più pagine Web contemporaneamente. I CSS possono essere aggiunti agli elementi HTML in 3 modi: Inline - usando l'attributo style negli elementi HTML Interno - usando un elemento nella sezione Esterno - usando un file CSS esterno Il modo più comune per aggiungere CSS è mantenere il stili in file CSS separati. Tuttavia, qui useremo lo stile in linea e interno, perché è più facile da dimostrare e più facile per te provarlo da solo.
Se il risultato non è visibile o comprensibile, aggiungi abbastanza testo in modo che sullo schermo della pagina web appaia una barra di scorrimento.
Questa è la fine della lezione! Ci sono ancora 2-3 lezioni rimaste e finirai di padroneggiare Nozioni di base sui CSS. Ciò significa che puoi creare bellissimi siti Web con facilità.
Non perdere il resto delle lezioni! Iscriviti agli aggiornamenti!
Messaggio precedente
Prossimo post

Gli sviluppatori Web in questi giorni possono creare layout di pagine Web complessi utilizzando varie tecniche CSS. Alcune di queste tecniche lo sono lunga storia(float), altri (flexbox) hanno raggiunto la popolarità in l'anno scorso.
In questo articolo, daremo un'occhiata da vicino ad alcune cose poco conosciute sul posizionamento CSS.
Prima di iniziare, esaminiamo brevemente le basi vari tipi posizionamento.
Panoramica dei metodi di posizionamento disponibili
proprietà CSS position definisce il tipo di posizione dell'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 si specifica un tipo di posizionamento diverso da quello di default.
A tale scopo, impostare la proprietà position su uno dei seguenti valori:
• parente
• assoluto
• fisso
• appiccicoso
E solo dopo aver impostato il posizionamento, puoi utilizzare le proprietà che spostano l'elemento:
• Giusto
• parte inferiore
• Valore iniziale queste proprietà - parola chiave automatico.
Tieni presente che se un elemento ha la sua 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 principali metodi di posizionamento
Ora diamo una rapida occhiata a tre differenze fondamentali tra tipi disponibili posizionamento:
• gli elementi posizionati in modo assoluto (assoluto) vengono completamente rimossi dal torrente, il loro posto viene preso dai vicini più vicini.
• relativamente posizionati (relativi) e appiccicosi (appiccicosi) mantengono il loro posto nel ruscello e i loro vicini più vicini non lo occupano. Tuttavia, il padding di questi elementi non occupa spazio, ma viene completamente ignorato da altri elementi e questo può portare a elementi sovrapposti.
• gli elementi fissi (e il posizionamento fisso è una sorta di posizionamento assoluto) sono sempre posizionati rispetto alla finestra (ignorando il posizionamento degli antenati), mentre gli elementi permanenti sono posizionati rispetto all'antenato più vicino con lo scorrimento (overflow:auto). E solo in assenza di tali antenati sono posizionati rispetto alla zona di visibilità.
Puoi vederlo più in dettaglio nella demo:
Nota: il posizionamento di "elementi appiccicosi" è ancora una tecnologia sperimentale con un supporto browser limitato. Ovviamente, se lo desideri, puoi utilizzare un polyfill per aggiungere questa funzionalità al browser, ma data la bassa prevalenza di questa proprietà, questo articolo non verrà discusso.
Elementi di posizionamento con tipo di posizione assoluta
Sono sicuro che molti di voi sanno come funziona il posizionamento assoluto. Tuttavia, per i principianti, molte cose possono confondere.
Pertanto, ho deciso di iniziare con lui nel descrivere le caratteristiche poco note del posizionamento.
Quindi, un elemento posizionato in modo assoluto è sfalsato dal suo antenato posizionato più vicino. Naturalmente, questo funziona se uno qualsiasi degli antenati ha una posizione diversa da quella statica: se l'elemento non ha antenati posizionati, viene spostato dall'ambito.
È in mostra seguente esempio:
In questa demo, la casella verde è inizialmente posizionata in modo assoluto con zero padding bottom:0 e left:0 , il suo antenato (la casella rossa) non era affatto posizionato.
Tuttavia, abbiamo posizionato relativamente il wrapper esterno (un elemento con la classe jumbotron). Nota come cambia il posizionamento del blocco 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 mobile, la proprietà float verrà impostata su none . Se invece impostiamo il posizionamento relativo, l'elemento rimarrà mobile.
Dai un'occhiata alla relativa demo:
In questo esempio ne definiamo due elementi diversi fluttuante a destra. Si noti che quando la casella rossa viene posizionata in modo assoluto, ignora il valore della proprietà float, mentre la casella verde relativamente posizionata mantiene il valore float.
Gli elementi inline posizionati in modo assoluto diventano elementi di blocco
Un elemento inline con posizionamento assoluto o fisso acquisisce le proprietà di un elemento di blocco. La conversione degli elementi inline in elementi block è descritta più dettagliatamente nella 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 proprietà di larghezza e altezza impostate su di essa funzionano solo con elementi a livello di blocco e inline-block e poiché non ha contenuto, non ha dimensioni.
Quando si assegna una posizione assoluta o fissa a una casella rossa, questa diventa a blocchi e le dimensioni dei blocchi specificate in essa diventano effettive.
Gli elementi posizionati in modo assoluto non hanno la compressione del riempimento
Per impostazione predefinita, quando due margini verticali si toccano, vengono uniti in uno uguale al più grande di essi. Questo è chiamato collasso del margine.
Il comportamento degli elementi posizionati in modo assoluto qui è simile agli elementi mobili: il loro riempimento non è unito ai loro vicini.
In questa demo, l'elemento ha un riempimento di 20px. La sua rientranza crolla con la rientranza elemento padre, pari anche a 20 pixel. Come puoi vedere, solo il posizionamento assoluto non crolla.
Ma come possiamo evitare che l'imbottitura collassi? Dobbiamo mettere un separatore tra di loro.
Può essere riempimento o bordo e può essere applicato sia agli elementi padre che figlio. Un'altra opzione è aggiungere un clearfix all'elemento padre.
Posizionamento degli 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à scelte (pixel o percentuali).
È un po' imbarazzante, vero? Quindi prima vediamo cosa dicono le specifiche sull'offset percentuale:
Offset come percentuale della larghezza (per sinistra e destra) o dell'altezza (in alto o in basso) del blocco padre. Per gli elementi incollati, l'offset viene calcolato come percentuale della larghezza (per sinistra e destra) o dell'altezza (in alto o in basso) del flusso. Consentito valori negativi.
Come accennato, quando si imposta l'offset come percentuale, la posizione dell'elemento dipende dalla larghezza e dall'altezza del suo genitore.
La demo mostra questa differenza:
Questo esempio utilizza pixel e percentuali per l'offset. Naturalmente, quando si specifica un offset in pixel, l'elemento viene spostato dove deve essere.
E se scegliamo le percentuali 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, trasformare la proprietà(insieme a varie funzioni translate) permette 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 nei CSS e abbia chiarito i problemi principali.
Per l'impaginazione vengono spesso utilizzati due strumenti principali − posizionamento e libera circolazione (fluttuante). Il posizionamento CSS ti consente di specificare dove apparirà un riquadro dell'elemento, mentre il movimento libero sposta gli elementi sul bordo sinistro o destro del riquadro del contenitore, consentendo al resto del contenuto di avvolgerlo.
Posizionamento e libera circolazione degli elementi
1. Tipi di posizionamento
La proprietà position consente di specificare esattamente la nuova posizione della casella, rispetto a dove si troverebbe nel normale flusso del documento. Per impostazione predefinita, tutti gli elementi vengono posizionati in sequenza uno dopo l'altro nell'ordine in cui sono definiti nella struttura del documento HTML. La proprietà non è ereditata.
posizione
Significato:
statico	Il valore predefinito significa nessun posizionamento. Gli elementi vengono visualizzati in sequenza uno dopo l'altro nell'ordine in cui sono definiti nel documento HTML. Utilizzato per cancellare qualsiasi altro valore di posizione.
parente	Un elemento posizionato relativamente viene spostato dalla sua posizione normale in direzioni diverse rispetto ai confini del contenitore genitore e lo spazio che occupava non scompare. Tuttavia, un tale elemento può sovrapporsi ad altri contenuti della pagina. Se si impostano contemporaneamente le proprietà superiore e inferiore o sinistra e destra per un elemento posizionato relativamente, solo la parte superiore funzionerà nel primo caso e quella sinistra nel secondo. Il posizionamento relativo consente di impostare lo z-index per un elemento, nonché di posizionare in modo assoluto gli elementi figlio all'interno di un blocco.
assoluto	Un elemento posizionato in modo assoluto viene completamente rimosso dal flusso del documento e posizionato rispetto ai confini del suo blocco contenitore (un altro elemento o finestra del browser). Il blocco contenitore per un elemento posizionato in modo assoluto è l'elemento predecessore più vicino il cui valore della proprietà position non è statico. La posizione dei bordi di un elemento viene determinata utilizzando le proprietà di offset. Lo spazio occupato da un tale elemento crolla come se l'elemento non esistesse nella pagina. Un elemento posizionato in modo assoluto può sovrapporsi o essere sovrapposto ad altri elementi (a causa della proprietà z-index). Qualsiasi elemento posizionato in modo assoluto genera un blocco, cioè assume il valore display: block; .
fisso	Corregge un elemento a luogo specificato pagine. Il blocco contenitore di un elemento fisso è il viewport, ovvero l'elemento è sempre fisso rispetto alla finestra del browser e non cambia posizione durante lo scorrimento della pagina. L'elemento stesso viene completamente rimosso dal flusso di documenti principale e creato in un nuovo flusso di documenti.
iniziale	Imposta il valore di una proprietà sul valore predefinito.
ereditare	Eredita il valore della proprietà dall'elemento padre.

Riso. 1. Differenza tra posizionamento statico, relativo e assoluto
2. Proprietà di spostamento
Le proprietà descrivono l'offset relativo al lato più vicino del blocco contenitore. Impostato per elementi in cui il valore della proprietà position non è uguale a static . Possono assumere valori sia positivi che negativi. Non ereditato.
Per la proprietà top, i valori positivi spostano il bordo superiore dell'elemento posizionato sotto e i valori negativi lo spostano sopra il bordo superiore del relativo blocco contenitore. Per la proprietà sinistra, i valori positivi spostano il bordo dell'elemento posizionato a destra e i valori negativi lo spostano a sinistra. Cioè, i valori positivi spostano l'elemento all'interno del blocco contenitore e i valori negativi lo spostano all'esterno.
3. Posizionamento all'interno di un elemento
Il blocco contenitore di un elemento posizionato in modo assoluto viene impostato su posizione: relativo senza offset. Ciò consente di posizionare gli elementi all'interno di un elemento contenitore.
.wrap (padding: 10px; altezza: 150px; posizione: relativa; sfondo: #e7e6d4; allineamento del testo: a destra; bordo: 3px tratteggiato #645a4e; ) .bianco (posizione: assoluta; larghezza: 200px; in alto: 10px; a sinistra : 10px; riempimento: 10px; sfondo: #ffffff; bordo: 3px tratteggiato #312a22; )
Riso. 2. Posizionamento relativo assoluto
4. Problemi di posizionamento
1. Se la larghezza o l'altezza di un elemento posizionato in modo assoluto è impostata su valore automatico, il suo valore sarà determinato dalla larghezza o dall'altezza del contenuto dell'elemento. Se la larghezza o l'altezza sono dichiarate in modo esplicito, questo valore verrà assegnato.
2. Se all'interno del blocco con posizione: assoluto sono presenti elementi per i quali involucro galleggiante, l'altezza di questo elemento sarà uguale all'altezza del più alto di questi elementi.
3. Per un elemento con posizione: assoluta o posizione: fissa, non è possibile impostare la proprietà float contemporaneamente, ma per un elemento con posizione: relativa, è possibile.
4. Se l'antenato dell'elemento posizionato è un elemento di blocco, il contenitore di blocco è formato dall'area del contenuto delimitata dal bordo. Se l'antenato è un elemento in linea, il blocco contenitore è formato dal bordo esterno del suo contenuto. Se non c'è un antenato, l'elemento del corpo è il blocco contenitore.
5. Libera circolazione degli elementi
Nell'ordine normale, gli elementi a livello di blocco vengono visualizzati a partire dalla parte superiore della finestra del browser e procedendo verso il basso. La proprietà float consente di spostare qualsiasi elemento, allineandolo a sinistra oa destra della pagina Web o dell'elemento contenitore che lo contiene. In questo caso, il resto degli elementi del blocco lo ignorerà e elementi in linea si sposterà a destra oa sinistra, liberando spazio per esso e scorrendo intorno ad esso.
Riso. 3. Movimento Libero elementi
Un blocco mobile ridimensiona il suo contenuto con spaziatura interna e bordi. I margini superiore e inferiore degli elementi mobili non vengono compressi. La proprietà float si applica sia agli elementi a livello di blocco che a quelli inline.
Il bordo esterno sinistro o destro di un elemento flottante, a differenza degli elementi posizionati, non può essere posizionato a sinistra (oa destra) del bordo interno del suo blocco contenitore, ad es. andare oltre i suoi confini. In questo caso, se il riempimento interno è impostato per il blocco contenitore, il blocco mobile sarà distanziato dal bordo del blocco contenitore della distanza specificata.
La proprietà cambia automaticamente il valore calcolato (renderizzato dal browser) della proprietà display per visualizzare: block per i seguenti valori: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell .table-caption , table-header-group , table-footer-group . Il valore di inline-table cambia in table .
La proprietà non ha effetto sugli elementi con display: flex e display: inline-flex .
Quando si utilizza la proprietà float su elementi a livello di blocco, è necessario specificare una larghezza. Ciò farà spazio al browser per altri contenuti. Ma se la larghezza totale di tutte le colonne è maggiore dello spazio disponibile, allora ultimo elemento andrà giù.
in cui imbottitura verticale I margini degli elementi flottanti non collassano con il riempimento degli elementi adiacenti, a differenza dei normali elementi a livello di blocco.
6. Rilassa gli elementi
6.1. chiara proprietà
La proprietà clear determina come verrà posizionato l'elemento che segue l'elemento mobile. La proprietà annulla il wrapping su uno o entrambi i lati dell'elemento, impostato proprietà galleggiante. La regola (overflow: hidden;) viene utilizzata per impedire la visualizzazione di sfondo o bordi sotto gli elementi mobili.
6.2. Cancellare il flusso con gli stili usando la classe clearfix e la pseudo-classe :after
Supponiamo di avere un contenitore di blocchi che non ha una larghezza e un'altezza specificate. Al suo interno è posizionato un blocco mobile con dimensioni specificate.
.container ( riempimento: 20px; sfondo: #e7e6d4; bordo: 3px tratteggiato #645a4e; ) .floatbox ( float: sinistra; larghezza: 300px; altezza: 150px; margine-destra: 20px; riempimento: 0 20px; sfondo: #ffffff ; bordo: 3px tratteggiato #666666; ) Riso. 4. "Effetto di collasso" del block-container
Soluzione al problema:
Creiamo una classe .clearfix e, in combinazione con la pseudo-classe :after, la applichiamo al blocco contenitore.
.container ( riempimento: 20px; sfondo: #e7e6d4; bordo: 3px tratteggiato #645a4e; ) .floatbox ( float: sinistra; larghezza: 300px; altezza: 150px; margine-destra: 20px; riempimento: 0 20px; sfondo: #ffffff ; bordo: 3px tratteggiato #666666; ) .clearfix:after ( contenuto: ""; display: blocco; altezza: 0; chiaro: entrambi; visibilità: nascosto; )
La seconda opzione per cancellare il flusso:
Clearfix:after ( contenuto: ""; display: tabella; clear: entrambi; )
Riso. 5. Applicazione di un metodo "clear" a un blocco contenitore contenente un elemento mobile
6.3. Un modo semplice per cancellare il flusso
C'è un altro trucco per cancellare il flusso per un elemento contenente float, come un elenco puntato orizzontale:
Ul ( margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; ) li ( float: left; width: calc(100% / 3 - 20px); height: 50px; margin- destra: 20px; sfondo: #ffffff; bordo: 3px tratteggiato #666666; ) li:last-child (margine-destra: 0;) 6. Cancellazione del flusso elenco orizzontale