position

L’ultima possibilità che ti elenco per quanto riguarda i box (ma comunque utilizzabile per qualsiasi elemento) riguarda il loro posizionamento. Come hai visto finora, ogni elemento ha una posizione definita. Partendo dall’alto, gli elementi si susseguono in modo ordinato, eccezione fatta se usi float. Tuttavia, puoi modificare questo comportamento grazie alla proprietà position.

Se vuoi usare position, devi metterti nell’ottica di pensare alla tua pagina HTML come ad un foglio sopra al quale andrai ad adagiare degli utleriori fogli di acetato, ognuno con all’interno il proprio contenuto1. Vediamo, anzitutto, i valori che la proprietà position può assumere:

  • static; impostazione predefinita, ogni elemento è consecutivo all’altro, e tutti gli elementi sono presenti allo stesso livello;

  • relative; l’elemento è posizionato il modo relativo secondo la sua normale posizione (ossia è possibile distanziarlo dalla sua origine2);

  • absolute; l’elemento è posizionato in modo assoluto a seconda del suo genitore. Se il genitore non ha un posizionamento relative, l’elemento absolute andrà a ritroso, finché non troverà un genitore relative. In caso contrario, <body> sarà il genitore a lui più prossimo;

  • fixed; l’elemento è posizionato in modo fisso, secondo la finestra del browser.

Chiarendo meglio: static e relative pongono l’elemento sullo stesso piano, con l’eccezione che, se il valore impostato è relative, puoi impostare delle distanze dagli elementi che gli stanno attorno (top, right, bottom, left)3.

div{
   position: relative;
   top: 20px;
   left: 32%;
}

Se l’elemento è absolute, invece, si viene a creare un nuovo livello e, in modo analogo a float, l’elemento risulta ad un livello superiore, portando di fatto il suo genitore a 0. Il genitore dovrebbe essere impostato come relative, in modo da definire l’origine dell’elemento posizionato in modo absolute. Sicuramente avrai visto in molti siti che alcune immagini vengono “aperte” sopra al contenuto (effetto Lightbox4): quasi sicuramente il contenitore di quella immagine è impostato su position:absolute;.

.relative-container{
   position: relative;
}

.relative-container div{
   position: absolute;
   right: 20px;
   bottom: 0;
}

Infine, se l’elemento è fixed, esso sarà sempre fisso sulla pagina e la sua origine sarà unicamente la finestra del browser. Con questo sistema, ad esempio, puoi creare i cosiddetti “Sticky Menu”, ossia i menu di navigazione che sono sempre fissi, anche quando si scorre la pagina.

.menu{
   position: fixed;
   top: 0;
   left: 0;
}

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

Come ti dicevo nella parte di width & height, puoi impostare l’altezza di un elemento a 100% solo se l’elemento è posizionato absolute o fixed: in questi due casi height:100%; rappresenta l’altezza massima del proprio genitore.

1. Se non lo sapevi, questo è lo stesso procedimento che si fa nel creare le animazioni vecchio stile (i cartoni animati, per intenderci) ed è lo stesso ragionamento che è stato fatto (digitalmente parlando) con i livelli di Adobe Photoshop.

2. Non parlo di utilizzare margin o padding, ma proprio di definire una posizione secondo un punto di origine.

3. Anche qui puoi usare le solite unità di misura: px, % e em.

4. Il nome deriva dal primo plugin JavaScript che ha trovato questa soluzione; esso, appunto, si chiamava Lightbox.

overflow z-index