fbpx

5 regole fondamentali per posizionare gli elementi con i soli Css

5 regole fondamentali per posizionare gli elementi con i soli Css

Spesso ci troviamo nella situazione di dover posizionare un elemento all’interno di un’altro contenitore. Per raggiungere questo obiettivo possiamo utilizzare anche solo i css. Per far ciò dobbiamo chiederci: come sono posizionati gli elementi? Quale percentuale viene usata? Percentuale in riferimento a cosa?
Le regole non sono semplici ed immediate e con questa guida cercherò di spiegare come farlo.

#1 LARGHEZZA E ALTEZZA

In questo esempio, il box azzurro è il nostro elemento figlio ed è l’elemento che stiamo cercando di posizionare utilizzando le proprietà CSS, all’interno del box bianco con bordo fucsia che è l’elemento genitore. L’elemento figlio è posizionato in modo assoluto.

.figlio {
position: absolute;
height: 50%;
width: 50%;
}

La larghezza e l’altezza dell’elemento figlio è pari al 50% del contenitore padre.
Per capire come varia la larghezza e l’altezza del nostro elemento figlio modifichiamo le percentuali dei valori. Nell’sempio che ho realizzato per te, cambia i valori percentuali di larghezza ed altezza e vedi cosa succede. Dopo aver modificato qualche valore possiamo dire che la larghezza e l’altezza dell’elemento figlio si basano sulla larghezza e sull’altezza dell’elemento padre.

#2 TOP E LEFT

Proviamo a vedere cosa succede posizionando l’elemento figlio con le proprietà “top e left”. Anche questi valori dipendono dalla larghezza e altezza dell’elemento padre.
Se un elemento ha il valore left al 50%, il suo lato sinistro si posizionerà a metà strada del suo elemento genitore e quindi esattamente al centro dell’elemento padre.

.figlio {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
left: 50%;
}

#3 MARGIN

Cosa succede con i margini? Anche i margini funzionano allo stesso modo di top e left anche se c’è una piccola differenza rispetto a prima.
Il margin-top si basa sulla larghezza del nostro elemento genitore e non sull’altezza (e la stessa cosa è per il margin-bottom). In altre parole, tutti i margini sono una percentuale delle larghezze dei loro elementi genitori.

.figlio {
position: absolute;
height: 50%;
width: 50%;
margin-top: 0%;
margin-left: 50%;
}

#4 PADDING

Anche il padding più o meno funziona allo stesso modo. Per esempio il “padding-left” non cambierà la larghezza del suo elemento figlio, a meno che il valore del padding-left è più grande dalla larghezza del suo elemento. Questo perché viene utilizzato il modello border-box e il box-sizing.

.figlio{
position: absolute;
height: 50%;
width: 50%;
padding-top: 0%;
padding-left: 50%;
}

#5 TRANSFORM: TRANSLATE

In questo caso il valore percentuale di transform:translate si basa sull’altezza e sulla larghezza del nostro elemento figlio.

.figlio{
position: absolute;
height: 50%;
width: 50%;
translate-top: 0%;
translate-left: 50%;
transform: translate(50%, 0%);
}

Quindi, ricapitolando:

“height” è una % dell’altezza dell’elemento padre
“width” è una % della larghezza dell’elemento figlio
“top” è una % dell’altezza dell’elemento padre
“left” è una % della larghezza dell’elemento padre
“margin-top” è una % della larghezza dell’elemento padre
“margin-left” è una % della larghezza dell’elemento padre
“padding-top” è una % della larghezza dell’elemento padre
“padding-left” è una % della larghezza dell’elemento padre
“translate-top” è una % dell’altezza dell’elemento figlio
“translate-left” è una % dell’altezza dell’elemento figlio

#6 Centriamo gli elementi

Adesso proviamo a centrare il nostro elemento figlio all’interno dell’elemento padre senza modificare la larghezza o l’altezza dell’elemento figlio ma utilizzando le altre proprietà.

.figlio {
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
translate-top: -50%;
translate-left: -50%;
transform: translate(-50%, -50%);
}

#7 Elementi centrati utilizzando le altre proprietà Css

Cosa è successo?
Ho modificato gli altri elementi tranne l’altezza e la larghezza dell’elemento figlio.

1) L’ho spostato sotto del 50% rispetto all’elemento padre utilizzando il top 50%;
2) L’ho spostato a destra del 50% rispetto all’elemento padre utilizzando il left: 50%
3) L’ho spostato sopra del 50% rispetto all’elemento figlio utilizzando il traslate(top): -50%;
4) L’ho spostato a sinistra del 50% rispetto all’elemento figlio utilizzando il traslate(left): -50%;

Con l’esempio che ho realizzato potrai capire come funzionano queste semplici regolette che ti permetteranno di posizionare gli elementi in maniera corretta ed utilizzando esclusivamente le proprietà Css.


Fonte: “What does 100% mean in CSS?” di Amelia Wattenberger per Css Layout

Per piacere seguici e metti mi piace:
Nessun Commento

Sorry, the comment form is closed at this time.

Social media & sharing icons powered by UltimatelySocial