Posizionamento del blocco in css. Posizionamento dei contenuti

posizionamento blocchi CSS una delle fasi più importanti del layout, perché è ciò che influisce sull'adattabilità del sito o sulla possibilità di una sua implementazione in futuro (se al momento non è richiesto), e ha anche un impatto significativo sull'ulteriore ridimensionamento il sito. Non è raro che gli "sfortunati layout designer" realizzino un layout del genere che alla fine è più facile buttarlo via che cambiare qualcosa, ma allo stesso tempo può sembrare completamente conforme al layout. Questa situazione nasce dal non capire dove e quando utilizzare l'uno o l'altro tipo di posizionamento. Oggi cercheremo di capire questo problema. E così, in css c'è una proprietà posizione. Questa proprietà può assumere 5 valori, ma ne considereremo 4 principali:

• assoluto
• statico
• parente
• fisso

Posizionamento assoluto del blocco (assoluto)

Il primo, nella nostra lista, il metodo di posizionamento è assoluto. Quando viene assegnata questa proprietà, il blocco diventa un'unità a sé stante e il resto degli elementi della pagina non influisce sulla sua posizione, né su altri elementi. La dimensione del blocco è determinata dalle proprietà di larghezza e altezza e la posizione nella pagina è determinata dalle proprietà superiori. a sinistra, a destra e in basso questi parametri impostano il riempimento dai bordi superiore, sinistro, destro e inferiore. Se il blocco non ha un elemento genitore, ed anche se il posizionamento dell'elemento genitore è diverso da statico, allora le proprietà top, left, bottom, right impostano i rientri dall'inizio della pagina, altrimenti dai bordi del elemento padre.

Molto spesso, questo tipo di posizionamento viene utilizzato quando il blocco deve essere premuto sul bordo destro o inferiore. Considera questo layout.

Per comodità, i blocchi sono stati evidenziati con una cornice multicolore. Il markup sarà simile a questo:

XHTML

Relazione ( posizione: relativa; ) .giallo ( posizione: assoluta; a destra: 10px; in basso: 10px; )

In questo esempio, abbiamo utilizzato le proprietà right e bottom per impostare il rientro dai bordi destro e inferiore. Questi valori di proprietà sono equivalenti a top: L'altezza dell'elemento è 10px ea sinistra: la larghezza dell'elemento è 10px.

Il posizionamento assoluto viene talvolta utilizzato anche quando è necessario "saltare" un elemento sull'altro.

Posizionamento statico (statico)

Il tipo più comune di posizionamento che si verifica in ogni pagina e di solito è impostato per la maggior parte degli elementi è statico, in CSS è scritto come statico. Per la maggior parte dei tag HTML, questo valore è determinato per impostazione predefinita. se la posizione non è impostata in modo esplicito, il valore sarà statico. Con questa disposizione gli elementi si allineano uno sotto l'altro e le coordinate nella finestra di ogni elemento dipendono dagli elementi più vicini con posizione: statica o posizione: relativa. Le proprietà in alto, a sinistra, a destra e in basso non funzioneranno con questo posizionamento, la posizione viene modificata a causa della proprietà del margine.

Posizionamento relativo (relativo)

Questo tipo di posizionamento è molto simile al posizionamento statico, tranne per il fatto che la posizione dell'elemento può essere modificata con le proprietà top, left, right, bottom e margin.

Posizionamento fisso (fisso)

Il posizionamento fisso per le peculiarità dell'impostazione delle coordinate è simile all'assoluto, ma la posizione viene calcolata non rispetto alla pagina HTML, ma rispetto alla finestra del browser, ad es. con la proprietà top: 10px, imposterai il riempimento superiore su 10px DALLA FINESTRA DEL BROWSER e indipendentemente dal livello di scorrimento della pagina in cui ti trovi, questo elemento seguirà sempre il tuo schermo.

Solitamente utilizzato per elementi di navigazione in modo che l'utente abbia sempre in vista informazioni importanti o collegamenti a pagine interessanti.

Proprietà posizione ha i seguenti significati
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;)

Aggiungi un tag vuoto prima del div con class="primer" - .

introduzione

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.

Posizionamento statico - posizione: statico;

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.

Posizionamento relativo - posizione: relativa;

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à

Per elementi in linea

Gli elementi di margine incorporati non si spostano su e giù (). Solo in alto, in basso

B A B

Posizionamento assoluto e fisso

Sembrerebbe che il blocco con posizione: assoluto debba essere sopra posizione: relativo, ma non è così, qui si applica 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 position: absolute e position: fixed, l'elemento smette di influenzare i tag adiacenti o attraverso la sua larghezza/altezza o float: left.

Tavolo finale

E ora, per consolidare il materiale, fai clic sui pulsanti all'inizio dell'articolo, pensa al motivo per cui si sono verificati tali cambiamenti.

Ultimo aggiornamento: 28/04/2016

CSS fornisce funzionalità di posizionamento degli elementi, il che significa che possiamo posizionare un elemento in una posizione specifica della pagina.

La proprietà principale che controlla il posizionamento nei CSS è la proprietà position. Questa proprietà può assumere uno dei seguenti valori:

statico: posizionamento dell'elemento standard, valore di default

assoluto : l'elemento è posizionato rispetto ai limiti dell'elemento contenitore, a meno che la sua proprietà position non sia uguale a static

relativo : l'elemento è posizionato rispetto alla sua posizione predefinita. In genere, lo scopo principale del posizionamento relativo non è quello di spostare un elemento, ma di impostare un nuovo punto di ancoraggio per il posizionamento assoluto degli elementi nidificati.

fisso : l'elemento è posizionato rispetto alla finestra del browser, questo permette di creare elementi fissi che non cambiano posizione durante lo scorrimento

Non dovresti applicare contemporaneamente la proprietà float e qualsiasi tipo di posizionamento diverso da statico (ovvero il tipo predefinito) a un elemento.

Posizionamento assoluto

La finestra del browser ha i bordi superiore, inferiore, destro e sinistro. Per ciascuno di questi quattro bordi, esiste una proprietà CSS corrispondente: sinistra (margine sinistro), destra (margine destro), superiore (margine superiore del contenitore) e inferiore (margine inferiore). I valori di queste proprietà sono specificati in pixel, ems o percentuali. Non è necessario impostare valori per tutti e quattro i lati. Di norma, vengono impostati solo due valori: il rientro dal bordo superiore della parte superiore e il rientro dal bordo sinistro di sinistra.

CIAO MONDO

Qui, il div posizionato in modo assoluto sarà 100px a sinistra del bordo della vista e 50px dal basso.

Non è così importante che dopo questo elemento div ci siano altri elementi. Questo blocco div sarà comunque posizionato rispetto ai confini del viewport del browser.

Se un elemento posizionato in modo assoluto si trova in un altro contenitore, che a sua volta ha un valore della proprietà position diverso da static , l'elemento viene posizionato rispetto ai limiti del contenitore:

Posizionamento relativo

Anche il posizionamento relativo viene impostato utilizzando il valore relativo. Per specificare la posizione specifica in cui l'elemento viene spostato, vengono applicate le stesse proprietà in alto, a sinistra, a destra e in basso:

proprietà z-index

Per impostazione predefinita, quando due elementi di bordo corrispondono, l'ultimo elemento definito nel markup html viene visualizzato sopra l'altro. Tuttavia, la proprietà z-index consente di modificare l'ordine degli elementi quando si sovrappongono. La proprietà prende un numero come valore. Gli elementi con un valore più alto per questa proprietà appariranno sopra gli elementi con un valore z-index più basso.

Per esempio:

Ora aggiungiamo una nuova regola allo stile del blocco redBlock:

RedBlock( z-index: 100; posizione: assoluta; in alto: 20px; sinistra:50px; larghezza: 80px; altezza: 80px; colore di sfondo: rosso; )

Qui lo z-index è 100. Ma non deve essere 100. Poiché il secondo blocco non ha z-index ed è in realtà zero, possiamo impostare la proprietà z-index del redBlock su qualsiasi valore maggiore di zero.

E ora il primo blocco sarà sovrapposto al secondo, e non viceversa, come all'inizio.

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: creare layout riutilizzabili e posizionare in modo univoco elementi usa e getta, oltre a descrivere diverse 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