Esempi di posizionamento

Note

In caso di posizionamento relativo:

• la property left determina lo spostamento del box rispetto al suo margine sinistro;
• la property top determina lo spostamento del box rispetto al suo margine superiore;
• la property right determina lo spostamento del box rispetto al suo margine destro;
• la property bottom determina lo spostamento del box rispetto al suo margine inferiore;

Nel caso siano applicate ad uno stesso box le properties top e bottom prevale top;

Nel caso siano applicate ad uno stesso box le properties left e right prevale left;

Per la descrizione completa delle properties left, top, right, bottom vedi: Box offsets.

Definizione di Containing block

La posizione e dimensione del/dei box di un elemento sono, a volte, calcolate rispetto ad un'area rettangolare chiamata blocco contenitore dell'elemento, Containing block. La definizione di blocco contenitore è la seguente:

1. Il blocco contenitore in cui risiede l'elemento root è chiamato blocco contenitore iniziale. Per i media di tipo continuo, esso ha le dimensioni della viewport ed è ancorato alla origine del canvas; esso è la page area per i page media. La property 'direction' del blocco contenitore iniziale è lo stesso dell'elemento root.
2. Per gli altri elementi, se la posizione degli elementi è 'relativa' o 'statica', il blocco contenitore è quello delimitato dai lati del suo più prossimo ascendente che sia di tipo block box o che stabilisca un contesto di formattazione.
3. Se l'elemento ha posizione 'fissa', il suo blocco contenitore è la viewport per i media di tipo continuo, o la page area per i medi di tipo paginato.
4. Se l'elemento ha posizione assoluta, i blocco contenitore deriva dal suo più prossimo ascendente posizionato in maniera assoluta, relativa, o fissa nel seguente modo:
   1. Se l'ascendente è un elemento inline, i blocco contenitore è il box che circonda i padding box del primo e dell'ultimo box inline generato per quell'elemento. In CSS 2.2, se l'elemento è splittato su più linee, il blocco contenitore è indefinito.
   2. Negli altri casi il blocco contenitore è costituito dai lati del padding dell'ascendente.
   diversamente il blocco contenitore è il blocco contenitore iniziale.

Il primo paragrafo nel box a destra è posizionato in maniera relativa. Il paragrafo successivo è identico ma posizionato in maniera statica.

Nelle due sezioni rossa e verde sono stati provati i diversi tipi di posizionamento di box block e di box inline in box contenitori rispettivamente statici e relativi. Ecco le regole css assegnate ai diversi blocchi rappresentati.

   #static{
      background-color:red;
      position:static;
      width:600px;
      height:450px;  
   }
   #relative{
      background-color:green;
      position:relative;
      width:600px;
      height:450px;
   }
  .boxStatic {
      display:block;
      background-color:yellow;
      width:120px;
      height:80px;  
      position:static;
      left:10%;
      top:15%;
   }
   .boxRelative{
      display:block;
      background-color:yellow;
      width:120px;
      height:80px;
      position:relative;
      left:30%;
      top:-5%;   
   }
   .boxAbsolute{
      display:block;
      background-color:yellow;
      width:120px;
      height:80px;
      position:absolute;
      left:50%;
      top:50%;
   }
   

   .box2Static{
      display:inline;    
      background-color:blue;
      color:white;
      position:static;
      left:10%;
      top:10%;
   }
   .box2Relative{
      display:inline;    
      background-color:blue;
      color:white;
      position:relative;
      left:15%;
      top:20px;
   }
   .box2Absolute{
      display:inline;    
      background-color:blue;
      color:white;
      position:absolute;
      left:5%;
      top:60%;
   }