CSS: posizionamento contestuale

  • CSS
  • Gabriele Romanato

Nei CSS il posizionamento contestuale ha luogo quando un elemento genitore posizionato in modo relativo ed assoluto contiene uno o più elementi posizionati in modo assoluto. In questo caso gli elementi figli non saranno più posizionati rispetto alla finestra del browser (viewport) ma rispetto al loro elemento genitore. Ciò significa che le coordinate di spostamento verranno calcolate rispetto a tale elemento genitore o, più precisamente, rispetto ai limiti (edges) del genitore.

Per esempio, data la seguente marcatura:


<body>

  <div id="parent">
  
    <div id="child"></div>
  
  </div>

</body>

E il seguente CSS:


body {
  margin: 0;
  padding: 0;
}

#parent {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

#child {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
}

Avremo il seguente risultato:

[caption id="attachment_239" align="aligncenter" width="435" caption="Due box posizionati in modo contestuale"]Posizionamento contestuale[/caption]

Come si può notare, l'elemento figlio è stato posizionato in modo assoluto rispetto al suo genitore, non rispetto alla finestra del browser (viewport). Questa tecnica si rivela utile in molti casi, soprattutto quando abbiamo bisogno di controllare con precisione la posizione degli elementi.

Torna su