Posizionamento assoluto senza coordinate in CSS
In realtà, specificare le coordinate per il posizionamento assoluto
non è obbligatorio. Se ad un elemento viene semplicemente
scritto position con valore
absolute, diventerà posizionato in modo assoluto,
ma rimarrà nella stessa posizione in cui
si trovava. In questo caso, tutti gli altri elementi si
comporteranno come se il nostro elemento non ci fosse
e potranno sovrapporsi ad esso.
Diamo un'occhiata ad alcuni esempi.
Esempio
Per iniziare, creiamo semplicemente tre blocchi senza posizionamento e tra di essi del testo:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Esempio
E ora aggiungiamo absolute al blocco verde.
Di conseguenza, questo blocco rimarrà al suo posto,
mentre tutti gli elementi sottostanti si comporteranno
come se il nostro elemento non ci fosse e si
sovrapporranno ad esso:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Esempio
Ora aggiungiamo la proprietà left,
senza specificare la posizione verticale. Di conseguenza
orizzontalmente il nostro blocco si posizionerà al valore
specificato, mentre verticalmente rimarrà
dov'era:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* aggiungiamo la posizione orizzontale */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Esempio
Ora, al contrario, aggiungiamo la proprietà
top, senza specificare la posizione orizzontale.
Di conseguenza, verticalmente il nostro blocco si
posizionerà al valore specificato, mentre orizzontalmente
rimarrà dov'era:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* aggiungiamo la posizione verticale */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
