Bootstrap 5: Sovrapporre leggermente un div all'altro

[allin81]

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

[allin81]

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?

[allin81]

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

[KillerWorm]

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ì.

[allin81]

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

[KillerWorm]

quindi tolgo anche il position: relative;?

Teoricamente puoi rimuoverlo, anche z-index, se non crea problemi con altre eventuali regole. Vedi tu.