Ciao in questo video Vorrei riprendere alcune questioni che in realtà abbiamo già affrontato nel nostro progetto iniziale nelle lezioni del corso base che trovi sempre in questo canale e cioè esaminare la proprietà position una proprietà particolarmente importante nel web design Perché ti permette di controllare la posizione che gli elementi del tuo progetto Vanno ad assumere all'interno della struttura che stai elaborando bene la proprietà position assume quattro valori fondamentali la Static che è quella di default quindi non va neanche specificata all'interno del del tuo progetto perché il i vari elementi che si susseguono quindi il flusso
di lavoro che è all'interno del nostro Body lo assumono normalmente con quel tipico la tipica struttura a blocchi impilati uno sotto l'altro Quindi diversi div i titoli i paragrafi immagini e così via come poi Ora vedremo poi due valori fondamentali molto importanti che sono il relative e l'absolute che ora naturalmente vedremo e infine la fixed ma iniziamo dall'inizio e subito in maniera molto molto pratica quindi accompagnando le nostre parole con degli esempi che ti dimostreranno ti faranno capire Ecco l'importanza di questa proprietà e il suo uso bene allora andiamo subito a implementare il nostro codice
con un div quale poi costruiremo dei box Quindi avremo una struttura blocchi dentro ci scriviamo semplicemente un un testo posto qualsiasi Ok vado anche a replicare ok e ulteriormente quindi facciamone tre Ok bene e poi con questi nostri faremo dei quadrati che ci aiuteranno in questa esposizione Ok poi inseriamo dello stile naturalmente Ok Ok cancelliamo gli attributi che non ci servono E allora attraverso Il selettore dell'elemento diretto di vediamo delle proprietà che sono generali per tutti i nostri tre div Ok bene vediamo subito Ok allora andiamo a dare subito una ampiezza facciamo 200 pixel Ok
andiamo a dare anche un'altezza sempre di 200 Ok perfetto e andiamo magari ad aggiungere un margin bottom in modo che i nostri elementi siano separati Ecco anche soltanto di 10 pixel può andar benissimo Ok Perfetto Ok A questo punto Quando io vado naturalmente a refreshare ecco qui però semplicemente e chiaramente soltanto i i miei testi è chiaro non ci sono Bordi Non ci sono colori ora magari ad ogni ehm nostro quadrato diamo un colore diverso in modo da poterli distinguere ma intanto Ecco qui come vedi non è intervenuta nessuna specifica della mia proprietà position e
i miei elementi si sono impilati in blocchi uno sotto l'altro ovviamente iniziando come è naturale che sia dall'angolo in alto a sinistra e poi uno sotto l'altro così andando ad aggiungere gli altri elementi quindi comportamento di default con questa position statico che naturalmente Come vedi non ho alcun bisogno di andare a specificare Ok Allora a questo punto diamo dei degli ID sono specifici univoci naturalmente ogni ID ha un colore diverso perciò andiamo subito chiamiamolo magari box 1 Ok questo invece vado a copiarmi questo e poi cambio naturalmente cambio l'ID che deve essere unico che questo
sarà box 2 benissimo e infine il nostro terzo div così magari il l'attribuzione del colore mi aiuta anche a distinguere Ok vado a dare dei colori Naturalmente la distinzione in colori ci aiuterà molto a distinguere a seconda delle posizioni che daremo ai nostri blocchi Ecco quello che sta avvenendo nel codice Allora andiamo ad agire soltanto sulla proprietà background color andiamo anche a prenderci un colore Ok impostiamo l'es decimale questo già ci va benissimo serve un colore qualsiasi ovviamente senza alcun problema andiamo a copiarci nostro codice già pronto andiamo a cambiare box 2 riprendiamoci il nostro
color picker ok e perfetto qui e infine il nostro box 3 Ecco Naturalmente poi andando a cambiare il nostro ID Ok via cancelliamo pure vediamo un po' so utilizziamo magari ecco ok Questo bene Perfetto questo Magenta bene ci siamo Andiamo a refreshare ed ecco qui i nostri tre quadrati bene ok uno sotto l'altro in position Static Ok allora andiamo subito ora a vedere in la position relative andiamo ad attribuire ad uno dei nostri blocchi possiamo anche cominciare dal primo dei Blocchi quindi position eh Anzi per la verità voglio farlo sul secondo dei nostri blocchi Ok
su quello centrale Ok gli altri rimangono in Static bene Ok allora position relative andiamo subito a vedere che cosa succede col nostro position relative vado refresh via ok E come Infatti mi aspettavo perché lo so non succede assolutamente nulla Ok Di fatto questo blocco qui ha una posizione ha assunto adesso una posizione relativa ma ha bisogno di parametri specifici perché questa posizione relativa possa realmente funzionare e dare i suoi effetti la posizione è relative si definis fince relative in base al fatto che dalla sua posizione iniziale che naturalmente è questa impostata dalla struttura stessa del
mio progetto Io posso spostare dare uno spostamento al top a destra al basso e a sinistra del mio elemento vado subito a definire quanto ho detto ad esempio iamo per questo mio blocco uno spostamento left quindi a partire dalla sinistra ad esempio di 100 pixel lo faccio con un valore abbastanza evidente proprio per mettere in evidenza questa cosa Vado a salvare e refreshare a questo punto refresh e via Ok come vedi quello spostamento relativamente alla sinistra di questo mio blocco Ok bene Allora adesso io vado ad utilizzare questa proprietà left mi indica Appunto una traslazione
Ecco da associare alla posizione relativa la vado ad utilizzare per il mio box 1 Ok che ti faccio notare è position Static Ok bene allora prendo proprietà il valore Me lo copio facciamo lo stesso eh ok Bene benissimo refresh Ok ta cosa succede assolutamente nulla non succede nulla proprio perché ti ricordo Appunto questo box è in position Static e non viene assolutamente influenzato da questa proprietà left Ok che invece come vedi viene utilizzato nella position relative Ok diamo anche un altro spostamento al top mettiamo a 200 pixel andiamo a vedere che cosa succede in questo
ehm in questo modo con un spostamento quindi dall'alto di 200 pixel Ok vado refresh l'ho come vedi l'ho attribuito al box in position relative Ok refresh e via una sovrapposizione quasi totale bastavano pochi pixel e naturalmente il mio blocco si andava ad sovrapporre all'altro con uno spostamento Ok Bene allora quindi abbiamo eh Intanto eh imparato già diverse cose ok Quindi position relative per poter traslare dall'alto da sinistra dal basso e a eh destra sinistra Alto e basso la mia il mio elemento ok e Questo naturalmente vale per i per le immagini insomma per i diversi
elementi che considero all'interno della della mia struttura Così come abbiamo visto che queste proprietà Ok left right bottom e ehm e top non funzionano non hanno effetto in quando vengono associate ad un oggetto in position Static ok Quindi vado anche a cancellarlo perché ovviamente ecco non ha senso Ok allora naturalmente Però questo oggetto Static può essere facciamo lo stesso esempio do margin left Ok bene perché naturalmente si potrebbe dire sì però gli oggetti si spostano anche con il margine Sì certo giustamente Infatti io adesso do un margin left di 100 pixel Ok Perfetto Ok vado
a togliere questo top solo per per un attimo Allora lasciamo position Static margin left di 100 pixel position relative e left di 100 pixel vado a refreshare vado a vedere che cosa succede T vedi 100 100 Pix tu mi dirai allora significa che queste due proprietà margin left e left funzionano nello stesso modo Beh non è esattamente così andiamo subito a capirlo ora magari apparentemente L'effetto è uguale Ovvio Infatti come vedi sono ben allineati sui 100 pixel di spostamento Questo è un margine Questa è una traslazione non è un margine Ok allora vado a utilizzare
un margin top Ok di 100 pixel in modo che insomma si possa ben vedere e qui darò un top del il medesimo valore 100 pixel Ok bene Andiamo a vedere che cosa è successo ai nostri box al box 1 e al box 2 ok spiamo ad aver salvato Sì ok Ori salvato vado a refreshare Allora è successo qualcosa di molto differente Questo è un margine dall'alto che come tu vedi è andato ovviamente a scostare anche questo te lo faccio vedere meglio proprio andando a commentare questo top Ok ok Come vedi tutto è stato spostato il
margine mi va a spostare i miei blocchi tutti ok Questo blocco ha qui un margine di 100 pixel margin top di 100 pixel mi va a spostare quindi gli elementi che ha sotto di lui ok bene ripristino il top e avrei Come avrai già visto anche da prima al mio box 2 questo qua succede qualcosa di diverso quello che è stato applicato infatti una posizione relativa relativa tanto che va a sovrapporsi a questo blocco non lo sposta perché questo non è un margine è una traslazione del mio di Ok bene quindi con questa dimostrazione quale
poi magari Tornerai ad esercitarti per capire la differenza fondamentale che c'è fra fra l'applica dei margini ovviamente e applicare invece e gli spostamenti attraverso le proprietà left right bottom e top ai tuoi elementi Ok bene proprietà che vanno ad associarsi come abbiamo già visto alla proprietà relative che altrimenti senza queste specifiche sarebbe praticamente inerte Cioè non conferisce dei cambiamenti al l'elemento considerato ok E come vedi anche per mette anche questa sovrapposizione cosa che il margine non permetterebbe perché il margine va a spostare ogni elemento in questo modo Ok ancora al mio position relative potrei applicare
ancora un'altra proprietà interessante che è la proprietà Z Index anch'essa l'abbiamo vista ma insomma non ci fa di certo male andarla a ricordare ok perché noi Ora ovviamente abbiamo la sovrapposizione di questo secondo blocco perché prec Ede il terzo ed è ovvio se ne voglio cambiare la sovrapposizione vado ad utilizzare il Z Index Ok in questo caso a-1 poiché devo portare un elemento superiore lo devo portare in secondo piano allora salvo Torno al mio al mio file ed ecco qui ok Quindi anche un altro modo per poterli ordinare Naturalmente se andavo poi a dare la
position relativa anche a questo box avrei potuto invece operare anche con con questo ma insomma ormai mi sembra che la cosa sia abbastanza chiara Ok Bene allora adesso vediamo l'altra posizione Ok bene Eh che è l'absolute ben e che spesso poi lavora proprio in combinazione con la position in col valore relative ok bene allora l' attribuiamo a questo mio terzo blocco Ok al box 3 quindi position Absolute Ok vado ad attribuire vado a salvare e vado a vedere intanto che cosa succede Ok come nell'altro caso ovviamente non succede assolutamente nulla beh perché chiaramente non ho
È come se in pratica mancassero delle istruzioni per poter attivare ehm questa proprietà Ok naturalmente anche questa posizione Eco lavora nello stesso modo quindi magari left lo diamo a 200 pixel va via Ok così andiamo a non vediamo per bene ed ecco qui ovviamente si sposta di 200 pixel e si pone Tra l'altro Come vedi anche proprio al centro di questo qui poiché questo è si è scostato di 100 e quindi Ok bene E da questo punto di vista sembrano perfettamente uguali No in realtà non lo sono perfettamente uguali adesso do invece un top di
50 pixel ok e vado a salvare bene Ok allora che cosa è successo cos successo allora E come vedi ha conservato naturalmente i 200 pixel qui a Left Ok bene ed ho praticamente resa assoluta la sua posizione ok perché come vedi i 50 erano Sì top al top era 50 i 50 pixel che io ho attribuito non sono a partire dal secondo blocco ma sono a partire eh dal top assoluto perché perché questo mio elemento Ok andiamo Qui all'interno del del mio body questo mio elemento questo qui ok rispetta quella che è la posizione del
suo Parent questo div 3 Infatti è un Child di cosa di body non ci sono altri elementi Ok è un fratello sibling degli altri due div e rispetta la posizione del Body Ok bene e quindi in pratica Ecco qui il risultato ed ecco perché viene chiamata posizione assoluta perché va a svincolare l'elemento da quello che è il suo posizionamento all'interno della struttura che io ho costruito perché in effetti in questo in questo caso vedi questo è il terzo elemento nell'ordine logico proprio nel flusso di lavoro come tu puoi vedere ma con questa mia naturalmente questa
mia ehm impostazione di questa proprietà Absolute io l'ho sganciato dal flusso di lavoro normale e l'ho legato all'andamento del Parent che in questo caso è Body naturalmente questo mio box Allora andiamo a fare l'esempio vado a inserirlo all'interno di un div Ok Bene allora chiudiamo qui l'altro div Ok che cosa sto facendo in questo momento Ok in questo momento il mio box 3 in questo modo non è più Child di body ma è Child di questo div qui Ok bene quindi il suo assoluto il suo termine assoluto non è più il suo riferimento non è
più il body ma è questo div qua vado a dare un ID anche a questo mio magari lo chiamo proprio Parent via così Parent Ok bene Perfetto Vado a riprendermi selettore Ok vado a dargli una position relative Ok gli do anche un background così lo vediamo altrimenti non riusciamo a capire posizionamento Ok bene sempre con il mio color picker Ok direi che va bene anche questo verdino Insomma un po' pallidino ma ci interessa il giusto vado a salvare Ok adesso TAC Guarda che cosa è successo ovviamente il punto di riferimento del terzo blocco è diventato
questo questo mio div che è Parent E se tu vedi bene i miei conti tornano tutti Allora andiamo ad osservare il mio terzo blocco questo Eccolo qua to ha un uno scostamento left di 200 pixel Infatti come vedi è proprio alla fine di questo tutti i miei div sono di 200 pixel quindi era abbastanza ovvio Ecco nel caso Se proprio ti venissero dei dubbi Guarda facciamo in questo modo 150 pixel e vediamo un po' che cosa succede Ok vado a salvare Tac gli si sovrappone un po' e poi lo scostamento al top che era di
50 ed è da qui Ok bene invece di 50 facciamo 70 Ok bene o vai Salvo e vedi come vedi un pochino più giù Ok bene quindi è molto e molto importante allora position Absolute ok aggancia il punto di riferimento rispetto al suo Parent Ok bene quindi l'elemento che gli è prossimo il Parent Ok che ha una posizione che non sia quella di default statica ok altrimenti appunto il suo termine assoluto è il body ok perché come abbiamo visto nel primo caso il nostro box 3 era Child del Body e in questo caso invece in
questa nuova costruzione avendogli app avendolo appunto inserito all'interno di un div di un altro div il Parent è diventato questo qua Ok Bene Ci metto anche qua dentro elemento elemento Parent Ok bene così è assolutamente chiaro e l'elemento Parent ok così non si vede bene e si muove appunto in relazione a questo qui ok E quindi svincolato app da quello che è il il suo posizionamento all'interno del mio progetto proprio così come il codice viene scritto Allora altra cosa altra cosa importante rispetto a questi valori che noi diamo a ai nostri elementi che possono assumere
anche delle dei valori negativi Ok Bene allora facciamo un esempio col nostro box 2 a questo punto beh lasciamo il left a 100 Invece al top diamo un valore di - 100 Ok ok via TAC e andiamo naturalmente anche a gestire anche in questo come vedi in questo caso è sotto in secondo piano anche qui Naturalmente in secondo piano Tra l'altro Come vedi anche un Z Index - 1 quindi ovviamente e va in secondo piano Ok bene questo magari lo si può anche tog vado lo commento magari più che toglierlo Ok bene Perfetto Vado a
salvare e TAC ok ed ecco qua Ok quindi valore negativo va bene Questo naturalmente vale anche per i valori attribuiti al alla position Absolute Ecco in questo caso sono perfettamente uguali quindi la gestione ehm contigua di queste due di queste due valori dati alla proprietà position relative Absolute possono lavorare insieme Spesso lavorano insieme e magari tipicamente Ecco proprio in questa possibilità di sovrapporre orate quindi andando a sovrapporre a svincolare con completamente magari che so un un paragrafo da sovrapporre ad un'immagine in modo da creare un blocco che io posso posizionare in piena Libertà andando a
gestire appunto questi spostamenti gestiti dalle proprietà top Right bottom e left Ok bene adesso l'ultima posizione la fixed Ok Quando un elemento è completamente svincolato lato e rimane fisso nella posizione in cui io lo vado ad ancorare e questo ancoraggio ha effetto anche sull lo scroll della finestra del browser Allora andiamo a vedere immediatamente di che cosa si tratta vado Allora immancabile div div Ok perfetto allora elemento fisso Ele mento fisso ok anche in questo caso do un ID chiamo fisso Ok non con grande fantasia ma insomma va bene così fisso gli attribuisco quindi un
background anche in questo caso G lo do far presto e poi subito la mia position fixed e vado Vabbè via su per giù gli do magari un spostamento a Left lo sposto di 400 sì lo mettiamo bene in evidenza e lo mettiamo al bottom di 300 400 pixel 400 pixel Ok tanto per dargli una sua posizione Ok adesso vado a refreshare vado a salvare ed ecco qui il mio elemento naturalmente lo ha preso da da qui allora già da qui si vede che l'elemento è fisso Tuttavia magari noi facciamo in questo modo vado a costruire
sotto una serie di P in modo da anche allungare il mio Ok bene ok basta mi serviva soltanto per praticamente dare lunghezza Ecco ok come tu vedi questo mio elemento rimane sempre nella sua posizione Ovviamente i miei blocchi qua vanno a spostarsi Ma questo no Ok bene allora magari lo metto anche un pochino più giù Invece del bottom 400 facciamo bottom 200 portiamolo un po' più giù Ok via che in questo caso si vede anche meglio Ok vedi e si sovrappone quindi tipico di quegli elementi che rimangono fissi all'interno del della finestra del browser e
come vedi che rimangono fissi anche con lo scroll stesso Tanto da qui in questo caso da sovrapporsi al al mio testo o a tutti gli altri eventuali elementi che sono presenti all'interno della mia pagina web bene Allora per questa lezione sulle posizioni è tutto ti lascio naturalment mente il file che abbiamo appena adesso creato in modo che tu puoi cominciare a fare i tuoi esercizi le tue osservazioni Ecco i tuoi esperimenti di questa interessantissima e importante proprietà che è position con i suoi diversi valori Ciao
