Posizionamento relativo CSS
- Pagina precedente Panoramica del posizionamento CSS
- Pagina successiva Posizionamento assoluto CSS
La scatola dell'elemento impostata con il posizionamento relativo si sposterà di una certa distanza. L'elemento mantiene la sua forma non posizionata, e lo spazio che originariamente occupava viene mantenuto.
Posizionamento relativo CSS
Il posizionamento relativo è un concetto molto facile da afferrare. Se si utilizza il posizionamento relativo per un elemento, apparirà nella sua posizione originale. Poi, è possibile impostare la posizione verticale o orizzontale di questo elemento per muoverlo 'rispetto' al suo punto di partenza.
Se si imposta top a 20px, la scatola sarà 20 pixel sotto la parte superiore della posizione originale. Se si imposta left a 30 pixel, verrà creato uno spazio di 30 pixel sulla sinistra dell'elemento, ovvero spostare l'elemento a destra.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Come mostrato nell'immagine seguente:
Attenzione, quando si utilizza il posizionamento relativo, l'elemento occupa comunque lo spazio originale. Pertanto, muovere l'elemento può causare che copra altri riquadri.
Esempio di posizionamento relativo CSS
- Posizionamento: posizionamento relativo
- Questo esempio dimostra come posizionare un elemento rispetto alla sua posizione normale.
- Pagina precedente Panoramica del posizionamento CSS
- Pagina successiva Posizionamento assoluto CSS
