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
Gestire liste di tipi semplici con Entity Framework Core
Generare file PDF da Blazor WebAssembly con iText
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Sostituire la GitHub Action di login su private registry
Creare form tipizzati con Angular
Eseguire operazioni con timeout in React
Definire lo stile CSS in base alle dimensioni del container
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Cache policy su route groups di Minimal API in ASP.NET Core 7
Implementare il throttling in ASP.NET Core
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Usare un KeyedService di default in ASP.NET Core 8