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
Eseguire operazioni sui blob con Azure Storage Actions
Usare una container image come runner di GitHub Actions
.NET Conference Italia 2023
Ottimizzazione dei block template in Angular 17
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare un service principal per accedere a Azure Container Registry
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire attività pianificate con Azure Container Jobs
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Utilizzare politiche di resiliency con Azure Container App
I più letti di oggi
- Cambiare la chiave di partizionamento di Azure Cosmos DB
- ASP.NET 2.0 per tutti
- Definire stili a livello di libreria in Angular
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- .NET Conference Italia 2023 - Milano e Online
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Ottimizzazione dei block template in Angular 17