Ciao a tutti, bentornati.
Oggi parleremo di elementi di posizionamento nella tua pagina web.
Quindi cercare di impaginare
la tua pagina e la tua codifica probabilmente sarà una delle
cose più dispendiose e potenzialmente frustranti che farai in questo intero corso.
E questo è uno dei motivi per cui ho lasciato quasi tutta questa settimana per
esercitarci a stendere le cose sulla tua pagina.
Le idee stesse sono molto semplici e semplici, ma
è il metterle insieme, come si aggiunge sempre di
più alla tua pagina, dove le cose possono diventare un po 'complicate.
Quindi iniziamo a parlare dei diversi elementi di posizionamento,
o, delle diverse proprietà di posizionamento, che puoi usare, ok?
Le quattro proprietà di posizione sono statiche, relative, assolute e
fisse, e per la maggior parte sono molto diverse. Il
modo in cui lavorano insieme, o come funzionano, è che ognuno di questi
può anche essere modificato da proprietà quali superiore, destra, inferiore e sinistra.
Quindi dici che tipo di posizione vuoi che l'elemento sia, e
poi puoi dire, ma voglio che sia così lontano dall'alto o
così alto dal basso, o così lontano da sinistra.
Quindi iniziamo con statico, e il motivo per cui inizieremo con statico
è perché lo hai già usato per tutto il tempo.
È ciò che chiamiamo il valore predefinito per gli elementi.
Se non dici nient'altro, sarà impostato su questo.
Come funziona è che il browser posizionerà ogni elemento
nella prossima posizione disponibile.
Puoi dargli valori come in alto, in basso, a sinistra e
a destra, ma il browser lo ignorerà completamente.
Il modo in cui funzionerà è qualcosa del genere.
Vediamo se riesco a redigere questo qui.
Hai il tuo schermo.
E poi è il momento di iniziare ad aggiungere cose alla tua pagina, e il browser va, oh,
beh, questo è span quindi si adatta proprio qui.
E la prossima portata, quindi si adatta proprio qui.
Oh, ha qualcosa che e' isolato, quindi devo andare quaggiu'.
Quindi, come aggiungi, inizia dalla parte superiore e funziona in modo diverso, e poi verso il basso.
Ma possiamo andare oltre.
Possiamo cambiare il modo in cui il browser posiziona le cose, e
uno dei modi in cui possiamo farlo è usare la posizione relativa.
E quando dico relativo, intendo relativo a se stesso.
Dove andrebbe?
Va bene, setacciamolo un po'.
È, fondamentalmente, molto simile alla posizione statica, ma
ora puoi aggiungere questi offset.
Il nuovo posizionamento, il nuovo posto in cui mettiamo l'elemento,
non influenzerà nessuno dei suoi vicini.
Invece, quello che può fare è lasciare buchi
dove il browser ha pensato che avrebbe dovuto essere in primo luogo.
Di solito, gli elementi relativamente posizionati vengono utilizzati come contenitori o
blocchi per altri elementi.
Quindi lascia che ti mostri un altro esempio veloce qui.
Accendi questo.
Ho la finestra del browser, e diciamo che sto per inserire un elemento span, e
andrà proprio lì.
Beh, invece, se dici che la posizione è relativa,
e gli dai una sorta di numero come la top ten, invece di
posizionarla proprio qui, in realtà andrà sotto dove dovrebbe essere.
Quindi, di nuovo, stiamo solo aggiungendo piccoli numeri per spostare le cose da dove
andrebbero normalmente.
La prossima posizione è quella che chiamiamo assoluto.
E questo può davvero confondere le persone quando lo avvii per
la prima volta, perché il browser, invece di metterlo nella prossima posizione disponibile,
ignora tutti gli elementi e guarda davvero solo il contenitore principale in cui si trovava.
In questo caso, mostreremo un esempio con il browser.
Gli altri elementi della pagina si comportano come se non esistesse nemmeno.
E ciò che questo può portare a, è che si può finire con un elemento sopra un altro.
Quindi, proviamo questo.
Ho il mio browser.
Non ho molto spazio, qui.
Quindi proprio qui. E diciamo che ho un div,
e ho deciso che è assoluto, e dovrebbe essere un 100 giù dall'alto, e
forse un 100 over.
Quindi va proprio qui.
Va bene, beh, se stessimo facendo un parente,
il prossimo elemento andrebbe sotto di esso.
Ma se abbiamo due valori assoluti, il prossimo che si presenta andrà,
di nuovo, proprio sopra.
Ok, la posizione finale di cui parlero' si chiama fissa.
E la posizione fissa è relativa alla finestra del browser.
Questo è il modo in cui sono in grado di creare queste pagine,
dove a volte si ottiene quel pop-up, e proprio non si riesce a farlo andare via.
Continui a scorrere e scorrere, e ti segue.
Beh, come l'hanno fatto e' che hanno usato quella posizione fissa.
Quell' elemento non si muoverà anche se la finestra viene fatta scorrere.
Solo per sapere se stai utilizzando un browser precedente o stai cercando di progettare
per Internet Explorer 7 o 8, questo funziona solo se stai usando un DOCTYPE HTML5.
Così di nuovo quando si pensa alla posizione fissa pensare a scatole pop-up
che semplicemente non andrà via.
Oppure potresti anche pensarlo come qualcosa di più utile che è quando sei
su una pagina, e potresti avere quella barra di navigazione che è in alto, e
mentre scorri la pagina, non devi scorrere indietro per
vedere la barra di navigazione, perché è sempre lì.
Quindi andiamo avanti e diamo un'occhiata a un esempio in cui ho alcuni
elementi diversi che usano le diverse proprietà di posizione.
Ok, sto per mostrarti una pagina dove sono entrato e
ho messo un paio di elementi.
Solo due div e un paio di paragrafi.
E tanto per cominciare, ho dato loro un po' di stile iniziale, così
possiamo distinguere tra loro.
Per il nostro div, posiziono relativo, gli ho dato un'altezza, una larghezza e un bordo.
Per i paragrafi, gli ho dato un bordo di un colore diverso, l'ho
dato in alto e a sinistra, e l'ho lasciato come posizione statica,
perché questa è la posizione predefinita che sarebbe sempre.
Quindi voglio mostrarti come apparirà nel browser.
Quindi, se guardi, puoi vedere che ho due div, uno qui e quaggiu', e
ho i miei tre paragrafi.
Uno, whoops, scusa.
Uno, due, tre.
La prima cosa che voglio sottolineare è che questo non sembra esattamente il modo in cui alcuni di
voi potrebbero aspettarsi che sembri, o anche esattamente nello stesso modo in cui alcuni di voi potrebbero vederlo se
lo caricate sul vostro browser.
Invece di mettere questo paragrafo in cima, in
realtà viene spinto un po' verso il basso.
Lo stesso per B e C.
Il motivo che accade è perché tutti i browser hanno valori predefiniti diversi per
dove deve essere posizionato il paragrafo.
Quindi, lasciami scorrere qui per un secondo.
Vado giu'.
E puoi vedere che c'è questo strano codice proprio qui che dice,
-webkit- margin-before e -webkit-margin-after.
Questo è un esempio di alcune pseudo classi che hanno usato.
Quindi non voglio che queste diverse cose predefinite entrino in gioco.
Quindi vado avanti e mi liberero' di loro.
Dopo che ho commentato quelli fuori e commentare che di nuovo dentro, mi aggiorno, e
ora abbiamo il nostro A, B e C.
Quindi di nuovo, A, B, e C, sono tutti relativi.
Stai dicendo al browser, mettilo nel prossimo spazio disponibile.
Quindi vediamo cosa succederà ora se cambio il mio elemento
da relativo a statico, o scusa, da statico a relativo.
E potete vedere che si sono spostati, e
il motivo per cui si sono spostati è che gli ho dato i valori dei primi 100 e lasciato 100.
Scendi, spingi su.
Se cambio questo a 50.
Ops, 59, funzionera'.
Si vede che non si muove così tanto.
Quindi, statico basta andare al primo posto che puoi.
Relativo, vai al primo posto che puoi, ma vai avanti,
puoi dirlo se vuoi che si muova un po' in entrambe le direzioni.
Il prossimo che faremo è assoluto.
Forse.
Ci siamo, quindi ora voglio che tu noti qualcosa.
Quella A e quella B, sono uno sopra l'altro.
Perché hai detto, voglio che tu sia 100 pixel giù e
59 pixel dal lato dell'elemento contenitore.
In questo caso, è quel div.
Quindi questo è strano perché sono proprio uno sopra l'altro, ed è tutto mescolato insieme.
Ci sono circostanze in cui vorrai che le cose siano l'una sopra l'altra.
Forse uno di loro sarà visibile, e
uno di loro sarà nascosto, e cambieranno dinamicamente.
Ma questo è ciò che succede con assoluto.
Ora, se scorro, rendero' questo schermo un po' piu' piccolo, e scorro,
potete vedere che la A e la B scorrono via.
E, naturalmente, ho fatto questo esempio perché volevo mostrarti che se ho passato
questo a risolto ora, invece di dire posiziona l'elemento rispetto
al suo genitore, dicendo posiziona questo elemento rispetto all'intero browser.
Quindi ora tutto è uno sopra l'altro, e se provo a scorrere via.
Non funziona.
Rimane li', ok?
Quindi, di nuovo, è statico, relativo, assoluto e fisso.
E voglio che tu giochi con questi, e conosca le tue opzioni,
prima di iniziare a stendere il tuo codice a mano.
Ora, una delle cose che vi ho mostrato è che è possibile che
più elementi vengano posizionati nella stessa posizione o uno sopra l'altro.
E c'e' un modo per affrontarlo se non ti piace l'ordine che stanno
presentando.
E questo si chiama Z-index.
Lo Z-index è solo, fondamentalmente, solo un valore numerico, è positivo o
negativo, che indica al browser il tuo ordine di impilamento.
Quindi, se hai qualcosa e sei davvero sicuro di voler essere sicuro che sia sempre in
cima, andresti avanti e ci metteresti qualcosa tipo 100.
Se non ti importasse davvero, potresti dargli un 100 negativo.
E questo è il modo in cui le persone possono andare avanti, e
posizionare gli elementi per essere un po 'più dinamici in seguito,
quando aggiungiamo qualche JavaScript o cose diverse del genere.
Quindi lo z-index è qualcosa che non molte persone codificano con, ma
è davvero utile quando si utilizza l'elemento di ispezione,
se c'è qualcosa sotto, e si desidera vedere come appare in cima.
Quindi andiamo avanti e rivediamo.
Posizionare l'elemento è la chiave per creare i layout che si
desidera avere.
E questo è particolarmente importante se siete preoccupati per il vostro sito guardando bene su
un piccolo schermo, un grande schermo, ecc
Quindi una corretta pianificazione sta per rendere questo molto più facile per
voi quando arriva il momento di codificare la vostra pagina.
Ma in realtà, la cosa più importante che puoi fare in questo momento è andare online, trovare quei
tutorial o riferimenti diversi in cui parlano di posizionamento, e giocare con
esso fino a quando ti senti un po 'più a tuo agio con come ognuno di questi funziona.
Buona fortuna.