Posizionamento CSS

Proprietà display CSS

La proprietà display nei CSS determina il tipo visualizzazione per un elemento. I valori più comuni per questa proprietà sono block, inline e inline-block.

Gli elementi a con block occupano l'intera larghezza del loro contenitore con interruzioni di linea prima e dopo e possono avere la loro altezza e larghezza regolate manualmente.

Gli elementi inline occupano il minor spazio possibile, scorrono orizzontalmente e la loro larghezza o altezza non si possono regolare manualmente.

Gli elementi inline-block possono apparire uno accanto all'altro e larghezza e altezza regolate manualmente.

.container1 {
display: block;
}

.container2 {
display: inline;
}

.container3 {
display: inline-block;
}

Posizionamento CSS fixed

Il posizionamento nei CSS fornisce a progettisti e sviluppatori opzioni per il posizionamento di elementi HTML su una pagina web.

La posizione CSS può essere impostata su static, relative, absolute o fixed.

Quando la posizione CSS ha un valore di fixed, viene impostata in un punto specifico di una pagina. L'elemento fixed rimane lo stesso indipendentemente dallo scorrimento.

La barra di navigazione è un grande esempio di un elemento che è spesso impostato in position: fixed;, permettendo all'utente di scorrere la pagina web e di accedere comunque alla barra di navigazione.

navbar {
postion: fixed;
}

Posizione CSS absolute

Il valore absolute per la proprietà position permette ad un elemento di ignorare gli elementi fratelli e di essere invece posizionato rispetto al suo elemento genitore più vicino che è posizionato in modo relatie o absolute.

Il valore assoluto rimuove completamente un elemento dal flusso del documento.

Usando gli attributi di posizionamento in top, e left, bottom e right, un elemento può essere posizionato ovunque desideri.

.blocco1 {
position: absolute;
}

Posizione CSS relative

Il valore relative nei CSS consente di posizionare un elemento rispetto a dove sarebbe stato originariamente su una pagina web.

Le proprietà di offset possono essere utilizzate per determinare la posizione effettiva dell'elemento rispetto alla sua posizione originale. Senza le proprietà di offset, questa dichiarazione non avrà alcun effetto sul suo posizionamento, agirà come valore di default static per la proprietà di position.

Per offset si intende top, left, bottom e right. Lo sviluppatore può anche utilizzare più di una proprietà di offset, cioè orizzontale e verticale contemporaneamente per impostare la posizione di un dato elemento.

.box {
top: 10px;
left: 40px;
position: relative;
}

Proprietà float

La proprietà float determina quanto a sinistra o quanto a destra un elemento deve "galleggiare" all'interno del suo elemento genitore.

Il valore a sinistra fa galleggiare un elemento sul lato sinistro del suo contenitore e il valore a destra fa galleggiare un elemento sul lato destro del suo contenitore.

Per la proprietà float la larghezza del contenitore deve essere specificata o l'elemento assumerà l'intera larghezza dell'elemento che lo contiene.

.left {
float: left;
}

.right {
float: right;
}

Proprietà CSS z-index

La proprietà CSS z-index specifica quanto indietro o in avanti un elemento apparirà su una pagina web quando si sovrapporrà ad altri elementi.

La proprietà z-index utilizza valori interi, che possono essere valori positivi o negativi.

L'elemento con il valore z-index più alto sarà in primo piano, mentre l'elemento con il valore z-index più basso sarà in fondo.

// e1 sarà sopra l'e2

.e1 {
position: absolute;
z-index: 1;
}

.e2 {
position: absolute;
z-index: -1;
}

La proprietà CSS clear

La proprietà clear specifica come un elemento deve comportarsi quando si scontra con un altro elemento all'interno dello stesso contenitore.

clear è solitamente usato in combinazione con elementi che hanno la proprietà float.

Nell'esempio sotto il codice CSS determina che nessun altro elemento all'interno dello stesso elemento contenitore è autorizzato a galleggiare sul lato sinistro di questo elemento.