Posizionamento assoluto di oggetti
Fig 3 - poster

## bottoni di navigazione

applicazione del posizionamento assoluto: i bottoni sono resi in questo documento html usando la classe navbutton

    <div class="navbuttons">
       <a href="dummy.html">
       <img class="button" src="./vintage_img/2.1.jpg" alt="back" width="50" />

       </a> <a href="dummy.html">
       <img class="button" src="./vintage_img/anim_earth.gif" alt="next" width="50" /></a>

       <a href="dummy.html">
       <img class="button" src="./vintage_img/2.1.jpg" alt="home" width="50" /></a>
    </div>

la classe navbutton e quella button (notare che il posizionamento della caption e' "relative", volendo cosi' dire che le specifiche date vengono attuate "a partire dalla posizione naturale dell'elemento":

    .navbuttons {
       position:absolute;
       top:0%;
       left:0%;
       background: #09F;
       border:5px outset;
       margin:10px;
       z-index:7
    }

    .button {border:5px outset #339933; margin:4px}

## Intestazione (titolo?)

il titolo e' posizionato in modo assoluto, usando la classe headerText

    <div class="headerText">
    Posizionamento assoluto di oggetti
    </div>

la classe headerText:

    .headerText {
       position:absolute;
       top:0%;
       left:30%;
       background: black;
       border-style: ridge;
       margin-top:10px;
       padding:.5ex .5em;
       text-align:center;
       font-weight:bold;
       z-index:1
    }

## L'immagine a sinistra, cosi' e cosi'

e pure l'immagine e' sistemata in modo assoluto, usando la classe picture pe il suo posizionamento e usando la classe aption per formattare e posizionare il testo che funge da "caption" della figura

    <div class="picture">
    <img src="Casablanca.jpg" alt="il film!" width="300px" /><br />
    <div class="caption">Fig 3 - poster</div>
    </div>

le classi picture e caption:

    .picture  {
       position:absolute;
       top:20%;
       left:2%;
       z-index:2
    }

    .caption {
       position:relative;
       top:-1.5ex;
       left:0.5em;
       font-style:italic;
       font-size: 120%;
       font-weight: bold;
       color: black;
       z-index:3
    }