problema overflow con elementi "position absolute"

Discussione in 'HTML e CSS' iniziata da ilmandorlone, 2 Gennaio 2014.

  1. ilmandorlone

    ilmandorlone Nuovo Utente

    Registrato:
    2 Gennaio 2014
    Messaggi:
    3
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    salve a tutti..
    ho un problema con css:
    ho creato un div "contenitore" con (overflow: hidden) e dentro il contenitore ho degli elementi con (position: absolute) il problema è che l'overflow del contenitore non ha effetto sull'elemento quindi lo visualizzo per intero anche se questo esce dai parametri del contenitore.
    un esempio che ho trovato:
    HTML:
    <div style="width:100px; height: 100px; border:1px solid; overflow:hidden; "><br/>
        <div style="position:inherit; width: 200px; height:200px; background:yellow;"><br/>
            <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;"><br/>
            </div>
        </div>
    </div>
    
    Schermata 2014-12-31 alle 10.09.29.png
    vorrei che l'elemento mantenesse una posizione assoluta nel contenitore ma che non venisse visualizzato al di fuori dal contenitore stesso.. come posso fare? grazie .. :)
     
  2. marcoint

    marcoint Utente Attivo

    Registrato:
    8 Gennaio 2014
    Messaggi:
    58
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Se hai impostato per gli elementi di sopra una width di 100px 200px e di 500px è normale che venga sballato. La width dovrebbe esere uguale per tutti e se li vuoi avere allineati, mentre è l'altezza ( height ) che devi cambiare se vuoi.
     
  3. flameseeker

    flameseeker Utente Attivo

    Registrato:
    27 Novembre 2013
    Messaggi:
    699
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Web Developer
    Ciao!
    Dovresti dare position:relative; al contenitore ;)
     
  4. T3KN

    T3KN Nuovo Utente

    Registrato:
    2 Gennaio 2014
    Messaggi:
    7
    Mi Piace Ricevuti:
    2
    Punteggio:
    0
    esatto ...
     
Sto caricando...

Condividi questa Pagina