HTML.it - Guida CSS di base - Il posizionamento assoluto

Posizionamento rispetto al blocco contenitore antenato più vicino

Questo box (.box-2) con posizionamento assoluto è posizionato rispetto al box .box-1: è il suo contenitore/antenato più vicino che presenta un posizionamento diverso da static (relativo). La distanza sul lato sinistro e sul lato superiore è di 5px e 10px, fissata con le proprietà top e left.

<div class="box-1">
 <div class="box-2">
  <p>Questo box (<code>.box-2</code>) [...].</p>
 </div>
</div>

.box-1 {
 position: relative;
}
.box-2 {
 width: 400px;
 height: 300px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
 position: absolute;
 left: 50px;
 top: 10px;
}

Posizionamento rispetto all'elemento html

Questo box (.box-3) con posizionamento assoluto è posizionato rispetto all'elemento radice html, ovvero rispetto alla finestra del browser con il contenuto perché non ha un contenitore/antenato più vicino che presenta un posizionamento diverso da static (relativo).

.box-3 {
 width: 400px;
 height: 300px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
 position: absolute;
 right: 50px;
 bottom: 20%;
}


<p>Questo box (<code>.box-3</code>) [...].</p>