Impilare DIV uno sopra l'altro?


116

È possibile impilare più DIV come:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

In modo che tutti quei DIV interni abbiano la stessa posizione X e Y? Per impostazione predefinita, vanno tutti uno sotto l'altro aumentando la posizione Y dell'altezza dell'ultimo DIV precedente.

Ho la sensazione che una sorta di galleggiante, display o altro trucco potrebbe mordere?

EDIT: il DIV genitore ha la posizione relativa, quindi l'uso della posizione assoluta non sembra funzionare.


Per chiarire la mia risposta, vuoi assolutamente posizionare i div interni.
Matt

Risposte:


168

Posiziona il div esterno come preferisci, quindi posiziona il div interno usando assoluto. Si accumuleranno tutti.

.inner {
  position: absolute;
}
<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>


1
Non sembra funzionare. Forse avrei dovuto dire che ho questo scenario: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> impila questo </div> <div> stack questo </div> <div> impila questo </div> <div> impila questo </div> </div> </div>
Torre

2
Vuoi posizionare in modo assoluto i div che hanno "stack this" in loro. Funziona: l'ho provato prima di pubblicare il mio originale. Se non metti selettori di classe sui tuoi div, adatta il metodo di selezione del div nella risposta di Eric per selezionare i div dello stack.
Matt

1
Non ha funzionato neanche per me. Troppi sconosciuti lasciati agli spettatori.
yan bellavance

Ho ottenuto che i div da impilare usassero position: relative e specificando l'altezza
yan bellavance

potrebbe avere qualcosa a che fare con il display prop?
yan bellavance

50

Da aggiungere alla risposta di Dave:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

Non sembra funzionare. Forse avrei dovuto dire che ho questo scenario: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> impila questo </div> <div> stack questo </div> <div> impila questo </div> <div> impila questo </div> </div> </div>
Torre

Penso che in questo caso tu voglia impostare "top: 0; left: 0;" sul tuo div che ha "position: relative". Sicuramente prova IE6 su quello, anche se non posso dire con certezza che funzionerà.
Eric Wendelin

10

Se intendi letteralmente metterne uno sopra l'altro, uno sopra (stesse posizioni X, Y, ma posizione Z diversa), prova a utilizzare l' z-indexattributo CSS. Questo dovrebbe funzionare (non testato)

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

Questo dovrebbe mostrare 4 sopra 3, 3 sopra 2 e così via. Più è alto lo z-index, più alto è l'elemento posizionato sull'asse z. Spero che questo ti abbia aiutato :)



5

Ho posizionato i div leggermente sfalsati, in modo che tu possa vederlo al lavoro.
HTML

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

CSS

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP


4

Ora puoi usare CSS Grid per risolvere questo problema.

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

E il css per questo:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

0

So che questo post è un po 'vecchio ma ho avuto lo stesso problema e ho provato a risolverlo diverse ore. Finalmente ho trovato la soluzione:

se abbiamo 2 scatole posizionate assolute

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

ci aspettiamo che ci sarà una casella sullo schermo. Per fare ciò dobbiamo impostare margin-bottom uguale a -height, in questo modo:

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

funziona bene per me.


0

Ho avuto lo stesso requisito che ho provato con il violino sotto.

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.