4.1 absolute positioning
Il posizionamento assoluto (absolute positioning) in CSS consente di gestire esattamente la posizione degli elementi su una pagina web. Quando usi il posizionamento assoluto, l'elemento viene rimosso dal normale flusso del documento e posizionato rispetto al parente posizionato più vicino. Se non c'è un tale parente, l'elemento verrà posizionato rispetto al contenitore iniziale (di solito <html> o <body>).
Caratteristiche principali del posizionamento assoluto:
- Rimozione dal flusso del documento: gli elementi posizionati assolutamente non influenzano altri elementi e non sono considerati nel calcolo delle dimensioni degli elementi genitori.
- Posizionamento relativo: gli elementi sono posizionati rispetto al parente più vicino con posizionamento relativo (
position: relative), assoluto (position: absolute), fisso (position: fixed) o adesivo (position: sticky). - Uso delle coordinate: le proprietà
top,right,bottomeleftsono utilizzate per impostare la posizione esatta dell'elemento.
Esempio di base di posizionamento assoluto
Diamo un'occhiata a un esempio semplice con il posizionamento assoluto di un elemento:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
In questo esempio, l'elemento .box è posizionato rispetto al contenitore genitore .container, che ha position: relative;.
4.2 Creazione di overlay
Il posizionamento assoluto è spesso utilizzato per creare overlay, come finestre modali, tooltip e lightbox.
Esempio di posizionamento assoluto:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 Layout e componenti dell'interfaccia precisi
Il posizionamento assoluto è utile per creare layout precisi, come i controlli nei player multimediali, controlli utente personalizzati e barre degli strumenti.
Esempio di posizionamento assoluto:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Creazione di layout complessi
Il posizionamento assoluto consente di creare layout complessi, come dashboard informative ed elementi interattivi.
Esempio di posizionamento assoluto:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION