Vediamo ora come gestire il posizionamento degli elementi all'interno della pagina.

La proprietà position imposta la modalità con cui un elemento deve essere posizionato nella pagina.

Può assumere uno di questi valori.

Static è il valore di default e corrisponde alla posizione naturale.

Dell'elemento nell'ordine in cui viene inserito nella HTML potrebbe essere una posizione relative Absolut Fix o Sticky.

Quando si specifica un valore diverso da statica.

In generale è necessario non è obbligatorio, però è utile impostare una posizione dell'elemento utilizzando una o più di queste proprietà.

Quindi la proprietà Top Right bottom left, come dicono le parole chiaramente questi indicano la posizione dall'alto a destra sotto e a sinistra.

In generale, è utile associare almeno una coordinata orizzontale, una verticale, specialmente quando si utilizza la pulzella position AM salut ola position fix ed entriamo nel dettaglio della position relative con la position relative.

Un elemento viene posizionato relativamente alla posizione naturale che avrebbe occupato nel normale flusso del documento.

Quindi, applicando le proprietà top right botnet, possiamo spostare l'elemento rispetto alla sua posizione naturale.

Che cosa significa la sua posizione naturale significa la posizione che avrebbe occupato nel normale flusso del documento.

Quindi la posizione in cui si trova rispetto agli altri elementi nell'ordine e nella html.

In questo caso l'elemento non viene rimosso dal flusso del documento, quindi non viene modificato l'ingombro che avrebbe occupato normalmente senza la position, ma viene solamente spostato a livello visivo.

Quindi è come se virtualmente continuasse ad occupare lo stesso spazio che avrebbe occupato senza alcun posizionamento.

In questa slide vediamo un esempio quindi ipotizzando di avere due elementi un quadratino rosso, un quadratino rosa e un quadratino verde.

Se al quadratino verde viene data una position relative con top zero e left venticinque pixel significa che questo quadratino verde viene spostato lasciando alla sua sinistra venticinque pixel e invece non viene spostato dalla sua posizione naturale dal top.

Quindi il top zero indica che non viene spostato dalla parte superiore, quindi rimane allineato superiormente dove dovrebbe essere, quindi viene solo spostato da sinistra di venticinque pixel.

Quindi rimane questo spazio bianco qui a lato.

Facciamo un esempio anche noi ricreiamo la stessa situazione dell'esempio, quindi creiamo dei quadrati, aggiungiamo anche una classe pink, facciamo un secondo quadrato con la classe green e poi per capire meglio questo discorso che non non non viene rimosso dal flusso del documento.

Aggiungiamo anche un terzo quadrato blu, quindi chiaramente inseriamo nel nostro foglio di stile square diamo una weed di', ad esempio cento pixel, una hit di cento pixel e ai vari colori.

Quindi alle classi pink, green e blue.

Diamo i rispettivi colori, quindi non il colore, bensì background-color alla classe green.

Diamo da background-color green chiaramente e alla classe blu andiamo da cadrà un color blu, quindi affiancando come sempre ehm il nostro browser questo lo chiudiamo così vediamo meglio possiamo vedere i nostri tre quadratini di loro sono dei div, quindi sono degli elementi di tipo blocco e naturalmente si posizionano uno sotto all'altro.

Ora se prendiamo il quadratino, quello verde quindi il quadratino di mezzo e gli assegniamo position relative ora questo quadratino potrebbe essere spostato all'interno del documento secondo delle coordinate che vogliamo andare noi.

Quindi se ad esempio diamo è top zero e left venticinque pixel come l'esempio della slide, vediamo che aggiornando la pagina il nostro quadratino si sposta verso destra, quindi lascia sinistra pixel vuoti modificando anche il top, quindi mettendo anche venticinque pixel nella proprietà top aggiorniamo la pagina e vediamo che il quadratino si abbassa lasciando venticinque pixel nella parte superiore gia' qui notiamo che il quadratino va a sovrapporsi al quadratino blu che sta sotto di esso.

Questo è proprio un esempio del dell'effetto che il virtualmente come se il quadratino verde fosse nella sua posizione originale, quindi esattamente sotto al quadratino rosa, ancor di più lo vediamo se ad esempio questo quadratino diamo un left di duecentocinquanta pixel, quindi si sposta molto verso destra, quindi lascia praticamente un buco vuoto.

Ma questo buco non viene riempito dal quadrato blu, quindi il quadrato blu non sale perché virtualmente, come se il quadratino verde fosse ancora esattamente qui esattamente sotto al quadratino rosa.

Con la position absolut andiamo a posizionare un elemento rispetto al proprio contenitore.

Che cosa si intende con contenitore? In questo caso si intende il primo elemento antenato, quindi potrebbe essere il contenitore diretto, quindi il padre chiamiamolo oppure il nonno, quindi il secondo e via dicendo quindi il primo più vicino a lui in ordine di gerarchia che abbia un posizionamento diverso da static, quindi un posizionamento diverso da quello di default.

Solitamente infatti si usa per il contenitore un posizionamento relativo.

Ad esempio in questo caso, diversamente dalla posizione relativa, l'elemento viene rimosso dal flusso del documento quindi è come se non occupasse piu' spazio come se venisse sganciato dalla pagina e quindi in questo caso noi lo spostiamo sempre top right bottom left rispetto ad un contenitore, quindi è come se andasse in un certo modo a sovrapporsi.

Quindi il modo piu' semplice il modo piu' consueto per posizionare un elemento b rispetto ad un elemento a c'è il suo contenitore è dare ad elemento ha una position relative senza specificare alcune coordinate, quindi semplicemente stiamo dando una position diversa da static per dare dei riferimenti alla absolut.

Quindi in questo caso non usiamo la relativa per spostare il con il contenitore, ma solamente per dare una una circoscrizione all'elemento che vogliamo spostare.

Quindi l'elemento b prenderà la position absolut che poi appunto potremmo spostare utilizzando le coordinate se non diamo nessuna position a nessun elemento ancestors, quindi nessun elemento genitore, nonno e via dicendo quindi non diamo nessun posizionamento diverso da static.

Il l'elemento composition absolut viene posizionato rispetto all'elemento radici html, quindi il padre di tutta la nostra pagina html vediamo anche qui un esempio.

Tornando all'esempio di prima togliamo al posizionamento relativo all'elemento verde.

Torniamo alla situazione iniziale e quindi abbiamo nuovamente i nostri tre quadratini rosa, verde e blu, una sotto all'altro perché sono degli elementi blocco.

Quindi se ora andassimo a prendere sempre il nostro quadratino verde e dessimo una position absolut ora il nostro quadratino verde non occupa più lo spazio.

Quindi sembra visivamente che il quadrato blu sia sparito, ma in realtà è andato a finire esattamente sotto al quadratino verde, perché il quadratino verde non sta più occupando spazio e quindi il blu è salito.

Per vedere questa cosa è sufficiente imporre ad esempio un left di cento pixel al nostro quadratino verde.

Questo si sposta e lascia esattamente lo spazio visibile per vedere il quadratino blu, mettendo anche trecento pixel come left.

Il quadratino verde si sposta completamente lasciando trecento pixel sulla sinistra e quindi il nostro quadratino blu è ben visibile, quindi occupa lo spazio che avrebbe occupato prima il quadratino verde senza il posizionamento assoluto.

Ora, come abbiamo visto, il l'elemento con la position absolut si dispone sempre rispetto al proprio ancestors che non ha la position static.

In questo caso i nostri quadratini sono disposti liberamente all'interno del body non hanno un contenitore, quindi se io adesso andassi a creare un divx container e andasse a inserire tutti questi quadratini all'interno del mio container li posizioniamo correttamente ora questo container diamo ad esempio una weed di cinquecento pixel, una hit di trecento pixel.

Diamo un bordo, quindi circo, scriviamo il nostro container perché così visivamente più semplice da vedere e aggiorniamo la pagina.

Quindi questo è il nostro container.

Se ora al nostro container diamo una position relative le coordinate del nostro quadratino verde faranno riferimento al container aggiornando la pagina non si nota molta differenza perché il nostro container è posizionato esattamente sul bordo della pagina.

Se però, ad esempio io adesso andassi a dare al mio quadratino verde un bottone zero, vedrei che questo va a posizionarsi esattamente sul limite inferiore del mio container.

Se il mio container non avesse la position relative, quindi vado a commentarla ora questo bottom non fa più riferimento al container ma fa riferimento nuovamente alla pagina html.

La position fix permette di posizionare un elemento rispetto alla newport, quindi anche questo non occupa più spazio all'interno della pagina.

Quindi viene sganciato dal contenuto e non scorre con il resto del documento, quindi significa che rimane sempre fisso in un punto dello schermo, come se fosse una specie di macchia sullo schermo.

Se ora facciamo che il nostro container è molto molto alto, quindi ad esempio impostiamo un'altezza di tre mila pixel, quindi molto molto lungo.

Il nostro contenitore prevede che la mamma la pagina faccia dello scroll, quindi al nostro quadratino verde anziché dare una position absolut possiamo anche togliere per il momento le impostazioni delle coordinate se a questo quadratino dessimo una position fix ora il quadratino ancora una volta non occupa più lo spazio é di nuovo il quadratino blu va a scomparire sotto di esso.

Se ora al mio con te al mio quadratino verde do un left duecento pixel è top duecento pixel quindi lo sto spostando da sinistra e dall'alto di cento pixel il mio quadratino va a lasciare duecento pixel da sopra e duecento pixel dal lato.

Fin qua è un comportamento molto simile a quello della position absolut.

La differenza sta nel fatto che se io ora faccio scroll il mio quadratino rimane fisso nello schermo quindi occupa sempre questa posizione, quindi non è più posizionato rispetto al mio contenitore ma è posizionato rispetto al newport l'ultima possibilità che ci dà la la proprietà position è position sticky il posizionamento Sticky è un posizionamento ibrido tra il posizionamento relativo e il posizionamento fisso.

Che cosa significa? Significa che inizialmente l'elemento viene posizionato in modo relativo, quindi riprende ri occupa nuovamente la sua posizione naturale all'interno del documento, ma nel momento in cui l'utente Fast Krall e raggiunge un certo l'offset definito all'interno appunto del css, che cosa succede? Che L'elemento diventa fixed, quindi diventa fisso sullo schermo, quindi dipende dalla posizione in cui si trova l'utente all'interno della pagina.

Quindi facendo scroll verso il basso verso l'alto l'elemento cambia il suo posizionamento.

Questa è una cosa che si nota nei siti, ad esempio quando ci sono quei menu, soprattutto nella Sai bar che all'inizio si trovano ad un certo punto.

Poi facendo scroll sia ancora in alto e noi scorriamo il contenuto.

Il nostro menù rimane fisso, sempre visibile.

Questo ad esempio un posizionamento sticky facciamo anche noi il nostro esempio.

Riprendiamo i quadratini di poco fa, quindi ripristiniamo le posizioni originali, quindi senza alcun position di nuovo i nostri quadratini tornano ad essere una sotto all'altro con il posizionamento naturale.

Quindi sono dei divi ancora una volta stanno tutti uno sotto all'altro.

Se adesso prendiamo sempre il nostro quadratino verde e assegniamo una position sticky il nostro quadratino, aggiornando la pagina continua ad occupare il suo spazio nel normale flusso del documento, quindi il quadratino blu rimane posizionato sotto di esso.

Ora se ad esempio mettessimo la proprietà top a cento pixel che è esattamente la dimensione di un quadratino, in questo caso potrebbe essere all'altezza del mio quadratino rosa.

Aggiorno la pagina e che succede finché io faccio scroll il mio quadratino rimane fisso che differenza c' è rispetto alla position pixel quindi che se io metto anziché cento pixel metto zero ora il mio quadratino inizialmente inizia a scrollare, ma quando arriva alla parte superiore della pagina rimane fisso.

Quindi questo è quello che solitamente si utilizza nei menu che inizialmente si trovano ad un livello inferiore, poi salendo si fissano nella pagina o sui menù laterali, come abbiamo visto nei vari esempi con la position absolute con la position fixed capita che quando appunto si imposta una posizione diversa da static, gli elementi si sovrappongono l'uno con l'altro quindi è qualche elemento potrebbe non essere più visibile perché viene coperto in tutto o in parte da altri elementi.

È possibile quindi definire in che modo questi elementi devono sovrapporsi, quindi decidere quale deve stare praticamente sopra.

In un certo senso, questa cosa è possibile tramite la proprietà Z Index.

Con la proprietà Z Index impostiamo l'ordine di sovrapposizione degli elementi.

Questa proprietà accetta dei valori numerici interi, quindi dei numeri da zero.

All'infinito é chiaramente un elemento con una Z index maggiore sta posizionato al di sopra, quindi copre praticamente elementi con una Z index inferiore di default.

Tutti gli elementi hanno una zeta index pari a zero, quindi per impostare una proprietà, quindi per impostare un valore diverso dallo zero.

Quindi, per sovrapporre gli elementi è necessario indicare una position diversa da static, altrimenti lo Z index non ha alcun effetto.

Vediamo un esempio riprendiamo i nostri quadratini, riprendiamo il nostro quadratino verde.

Per fare questo esempio utilizziamo sempre la posizione, la posizione assoluta e vediamo che ponendo top zero il mio quadratino verde va a sovrapporsi all'elemento rosa che è sopra di esso.

Questo perché ha una posizione Absolut.

Quindi che cosa sta succedendo? Sta succedendo che il mio elemento verde, essendosi posizionato al top zero rispetto alla pagina, in questo caso va a coprire l'elemento rosa che è quello sopra di esso.

quindi per far sì che l'elemento rosa stia sopra all'elemento verde, ad esempio, possa andare ad assegnare un valore z index maggiore, quindi ad esempio due.

Perché abbia effetto, però, devo andare a definire una position sempre diversa da static e quindi ad esempio relative.

Ora se aggiorna una pagina, vediamo che il nostro quadratino rosa torna a essere visibile e va a nascondere il quadratino verde che esattamente sotto per vedere che il trucco c'è ma non si vede.

Quindi il quadratino verde è ancora presente, possiamo andare ad esempio un top di cinquanta pixel e lo vedremo spuntare.

Vedremo spuntare una parte del quadratino verde.

La stessa cosa possiamo andare ad esempio un left di cinquanta pixel per farlo muovere anche da sinistra.

Quindi se di nuovo vado a dare una zeta index di tre al quadratino verde torna a sovrapporsi, a posizionarsi sopra al quadratino rosa, quindi il numero maggiore è quello che vince.

In pratica questo è il motivo per cui spesso nei siti web si trovano degli zeta index infiniti, quindi nove nove nove nove nove perché si vuole essere sicuri che soprattutto con i menu che rimangono fissi con quei posizionamenti è per cui gli elementi devono scorrere al di sotto si vuol essere sicuri che nulla ci scorra sopra, quindi si mettono questi z index infiniti.

Però ovviamente non è che non è necessario, è sufficiente andare a inserire.

Magari non si vuole lavorare per unità, ma si possono usare ad esempio le decine, quindi dieci, venti trenta non non è necessario porre un milione di z index.