• User Attivo

    Z-Index

    Sto inserendo un link che rimanda a google maps con "Greybox".
    il link devo inserirlo in basso a destra e riesco a spostarlo solo verso sinistra perchè spostandolo verso il basso mi scombina tutto il footer.

    So che per questi casi va bene usare lo Z-Index ma non riesco a capirne bene il funzionamento.

    Posto i codici

    HTML:

    [...]

    </div>

    <div id="footer">
    <div id="mappa">
    <ul>
    <li>
    <a href="link del sito" title="Google" rel="gb_page_center[640, 480]">Visualizza la Mappa</a>
    </li>

    </ul></div></div>
    </body>
    </html>

    CSS

    [...]

    #footer{
    background-image:url(images/footer.jpg);
    background-repeat:no-repeat;
    margin:0 auto;
    padding:0;
    height:220px;
    width:100%;
    }

    #mappa{
    margin:0 0 0 550px;
    padding:0;
    }

    display:inline;
    }

    display:block;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-style:italic;
    font-size:14px;
    font:bold;
    text-decoration:none;
    color:#FFF;
    line-height:25px;
    }

    color:#FC0;

    }

    Spero di essermi spiegato abbastanza bene,Grazie a tutti!


  • User Attivo

    Ciao lo z-index funziona così:
    Il posizionamento con i CSS avviene, oltre che sulle due coordinate dello schermo, su una sorta di "terza dimensione" che specifica come si dispone un elemento rispetto agli elementi che occupano la stessa area dello schermo. Lo z-index serve per controllare quali elementi verranno disposti "sopra" o "sotto" rispetto alla profondità dello schermo. Elementi con z-index maggiore verranno disposti sopra. Lo z-index accetta valori interi, sia positivi che negativi.

    Prova ad applicarlo alla elemento ul, se io fossi in te userei i margini negativi anzichè il z-index.

    Es:

    padding-bottom: -10px.

    Con l'attributo padding lo spazio di distanza viene inserito al di qua dei bordi dell'elemento e non all'esterno come avviene se usi l'attributo margin.