Il posizionamento degli elementi all'interno della pagina può essere modificato per adattare un elemento alle nostre necessità.
Di default il posizionamento che viene applicato è chiamato static e non applica particolari effetti: l'elemento sarà visualizzato dove è posizionato.
.myElement { position: static; }
Un particolare tipo di posizionamento è quello relativo, che unito alle proprietà di posizionamento top/bottom/left/right (e solo in presenza di queste ultime) consente di definire un posizionamento relativo rispetto al contenitore: nell'esempio andremo a tirare l'elemento in alto di 30px e a sinistra di 50px riseptto al suo contenitore (sovrapponendosi, di fatto).
.myElement { position: relative; top: -30px; left: -50px; }
Da questo punto di vista, possiamo anche posizionare in maniera assoluta gli elementi tramite absolute. In questo caso, il posizionamento sarà assoluto rispetto al primo elemento padre nell'albero dei controlli che non sia stato posizionato a propria volta (eventualmente il tag body, se non ce ne sono). Nell'esempio che segue avremo un elemento posizionato in cima alla pagina distante 30 pixel dall'alto e 50 dalla sinistra, che segue lo scrolling della pagina.
.myElement { position: absolute; top: 30px; left: 50px; }
Infine, possiamo posizionare un elemento in maniera assoluta e non farlo scrollare con la pagina specificando il valore fixed: nell'esempio andremo a posizionare un elemento in basso a destra, a 50px di distanza, che resterà sempre in quella posizione anche durante lo scrolling.
.myElement { position: fixed; bottom: 50px; right: 50px; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Potenziare Azure AI Search con la ricerca vettoriale
Generare file PDF da Blazor WebAssembly con iText
Utilizzare Tailwind CSS all'interno di React: installazione
Usare le variabili per personalizzare gli stili CSS
Hosting di componenti WebAssembly in un'applicazione Blazor static
Gestire liste di tipi semplici con Entity Framework Core
Eseguire attività con Azure Container Jobs
Utilizzare Tailwind CSS all'interno di React: primi componenti
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Creare alias per tipi generici e tuple in C#
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
C# 12: Cosa c'è di nuovo e interessante