CSS: come posizionare due elementi uno sopra l'altro, senza specificare un'altezza?

Ho due DIV che devo posizionare esattamente uno sopra l'altro. Tuttavia, quando lo faccio, la formattazione viene completamente rovinata perché il DIV contenente si comporta come se non ci fosse altezza. Penso che questo sia il comportamento previsto con, position:absolutema ho bisogno di trovare un modo per posizionare questi due elementi uno sopra l'altro e fare in modo che il contenitore si allunghi mentre il contenuto si estende:

Il bordo superiore sinistro di .layer2deve essere esattamente allineato al bordo superiore sinistro dilayer1

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}

Prima di tutto, dovresti davvero includere la posizione su elementi assolutamente posizionati o ti imbatterai in comportamenti strani e confusi; probabilmente vuoi aggiungere top: 0; left: 0al CSS per entrambi gli elementi posizionati in modo assoluto. Si potrà anche avere position: relativesu .container_rowse si desidera che gli elementi posizionati in modo assoluto ad essere posizionati rispetto al loro genitore piuttosto che il corpo del documento :

Se l'elemento ha 'position: absolute', il blocco contenitore è stabilito dall'antenato più vicino con una 'position' di 'absolute', 'relative' o 'fixed' ...

Il tuo problema è che position: absoluterimuove elementi dal flusso normale :

Viene completamente rimosso dal flusso normale (non ha alcun impatto sui fratelli successivi). Un box posizionato in modo assoluto stabilisce un nuovo blocco di contenimento per bambini a flusso normale e discendenti in posizione assolutamente (ma non fissa). Tuttavia, il contenuto di un elemento posizionato in modo assoluto non scorre intorno ad altre caselle.

Ciò significa che gli elementi posizionati in modo assoluto non hanno alcun effetto sulla dimensione del loro elemento genitore e il primo <div class="container_row">avrà un'altezza pari a zero.

Quindi non puoi fare quello che stai cercando di fare con elementi posizionati in modo assoluto a meno che tu non sappia quanto saranno alti (o, equivalentemente, puoi specificare la loro altezza). Se puoi specificare le altezze, puoi mettere le stesse altezze su .container_rowe tutto si allineerà; potresti anche mettere una margin-topsul secondo .container_rowper lasciare spazio agli elementi assolutamente posizionati. Per esempio:

http://jsfiddle.net/ambiguous/zVBDc/

In realtà questo è possibile senza posizione absolutee specificando qualsiasi altezza. Tutto quello che devi fare è usare display: gridsull'elemento genitore e mettere i discendenti, nella stessa riga e colonna.

Controlla l'esempio di seguito, basato sul tuo HTML. Ho aggiunto solo <span>e alcuni colori, così puoi vedere il risultato.

Puoi anche cambiare facilmente z-indexciascuno degli elementi discendenti, per manipolarne la visibilità (quale dovrebbe essere in alto).

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1 span{
  color: #fff;
  background: #000cf6;
}

.layer2{
  background: rgba(255, 0, 0, 0.4);
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...<br>Test test</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

Ottima risposta, "mu è troppo corto". Cercavo esattamente la stessa cosa e dopo aver letto il tuo post ho trovato una soluzione che si adattava al mio problema.

Avevo due elementi della stessa identica dimensione e volevo impilarli. Poiché ognuno ha la stessa dimensione, quello che potevo fare era farlo

position: absolute;
top: 0px;
left: 0px;

solo sull'ultimo elemento. In questo modo il primo elemento viene inserito correttamente, "spingendo" l'altezza dei genitori, e il secondo elemento viene posizionato sopra.

Spera che questo aiuti altre persone che cercano di impilare 2+ elementi con la stessa altezza (sconosciuta).

Ecco un'altra soluzione che utilizza display: flex invece di position: absolute o display: grid.

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

Ho dovuto impostare

Container_height = Element1_height = Element2_height

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

L'utente può utilizzare z-index per impostare quale deve essere in primo piano.

Ecco alcuni CSS riutilizzabili che preserveranno l'altezza di ogni elemento senza utilizzare position: absolute:

.stack {
    display: grid;
}
.stack > * {
    grid-row: 1;
    grid-column: 1;
}

Il primo elemento nel tuo stackè lo sfondo e il secondo è il primo piano.

A causa del posizionamento assoluto che rimuove gli elementi dalla posizione del flusso di documenti: Absolute non è lo strumento giusto per il lavoro. A seconda del layout esatto che desideri creare, avrai successo utilizzando margini negativi, position: relative o forse anche transform: translate. Mostraci un esempio di quello che vuoi fare, possiamo aiutarti meglio.

Ovviamente, il problema sta tutto nel recuperare la tua altezza. Ma come puoi farlo se non conosci l'altezza in anticipo? Bene, se sai quale rapporto di aspetto vuoi dare al contenitore (e mantenerlo reattivo), puoi ripristinare la tua altezza aggiungendo il riempimento a un altro figlio del contenitore, espresso in percentuale.

Puoi anche aggiungere un manichino dival contenitore e impostare qualcosa come padding-top: 56.25%dare all'elemento fittizio un'altezza che è una proporzione della larghezza del contenitore. Questo spingerà fuori il contenitore e gli darà un rapporto di aspetto, in questo caso 16: 9 (56,25%).

Il riempimento e il margine usano la percentuale della larghezza, questo è davvero il trucco qui.

Dopo molti test, ho verificato che la domanda originale fosse già corretta; mancano solo un paio di impostazioni:

• il container_rowDEVE avereposition: relative;
• i bambini (...), DEVONO avere position: absolute; left:0;
• per assicurarsi che i bambini (...) siano allineati esattamente l'uno sull'altro, container_rowdovrebbero avere uno stile aggiuntivo:
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center; potrebbe anche aiutare.