Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,818

    Bootstrap 5: Sovrapporre leggermente un div all'altro

    Buongiorno

    vorrei sapere come posso fare a sovrapporre leggermente un div all'altro

    In pratica ho 2 div

    <div 1>IMMAGINE DI SFONDO CON FOTO DI PRESENTAZIONE A SCHERMO INTERO</div1>
    <div 2>DESCRIZIONE DEL PRODOTTO</div2>

    Il div 2 inizia subito sotto al div 1 ma invece vorrei che fosse leggermente dentro l'immagine di presentazione, tipo 20-30 px piu' sopra ed in primo piano)

    In pratica vorrei fare tipo l'immagine linkata (con il testo che entra nell'immagine)

    https://ibb.co/60MS75t

    Grazie

  2. #2
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,818
    Mi auto rispondo

    Ho aggiunto al primo div questi parametri:

    position: relative;
    z-index: 1;

    ed al secondo div questi:

    position: relative;
    top: -100px;
    z-index: 2;


    Fa quello che deve fare, adesso l'unico problema è che tra il secondo div e il footer ci sono quei 100px di vuoto.

    Come potrei colmarlo?
    Dovrei alzare il footer in qualche modo? Oppure aggiungere un nuovo div?

  3. #3
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,818
    in pratica avendo "alzato" il div del contenitore, adesso ho questo spazio "vuoto" sotto, mentre vorrei arrivare al footer con lo sfondo bianco con il bordo a destra e sinistra come dove ho il testo.
    Ecco l'immagine per chiarire meglio il problemino

    https://ibb.co/KG4qgNX

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,261
    Anziché top:-100px, prova con margin-top:-100px
    Questo fa in modo di mantenere la continuità nel flusso dei contenuti che seguono tale div, a differenza delle regole di posizionamento relativo che invece alterano la posizione dell'elemento mantenendone però l'ingombro come se fosse ancora lì.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  5. #5
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,818
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Anziché top:-100px, prova con margin-top:-100px
    Questo fa in modo di mantenere la continuità nel flusso dei contenuti che seguono tale div, a differenza delle regole di posizionamento relativo che invece alterano la posizione dell'elemento mantenendone però l'ingombro come se fosse ancora lì.
    quindi tolgo anche il position: relative;?
    Sembra funzionare con margin-top
    Grazie

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,261
    quindi tolgo anche il position: relative;?
    Teoricamente puoi rimuoverlo, anche z-index, se non crea problemi con altre eventuali regole. Vedi tu.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.