Is het mogelijk om meerdere DIV’s te stapelen zoals:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
zodat al die innerlijke divs dezelfde x- en y-positie hebben? Standaard gaan ze allemaal onder elkaar toenemende y-positie door de hoogte van de laatste vorige div.
Ik heb een gevoel van float of display of een andere truc kon bijten?
EDIT: de ouder DIV heeft positie familielid, dus het gebruik van positie absoluut lijkt niet te werken.
Antwoord 1, Autoriteit 100%
Plaats de uiterlijke DIV, maar positioneer vervolgens de innerlijke divs met absoluut. Ze zullen allemaal opstapelen.
.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>
Antwoord 2, Autoriteit 32%
Om toe te voegen aan het antwoord van Dave:
div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
Antwoord 3, Autoriteit 10%
U kunt nu CSS-raster gebruiken om dit te verhelpen.
<div class="outer">
<div class="top"> </div>
<div class="below"> </div>
</div>
En de css hiervoor:
.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;
}
Antwoord 4, autoriteit 6%
Als je bedoelt door letterlijk de ene op de andere te plaatsen, de andere bovenaan (dezelfde X-, Y-posities, maar andere Z-positie), probeer dan het CSS-attribuut z-index
te gebruiken. Dit zou moeten werken (niet getest)
<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>
Hier moet 4 staan boven op 3, 3 boven op 2, enzovoort. Hoe hoger de z-index, hoe hoger het element op de z-as staat. Ik hoop dat dit je heeft geholpen 🙂
Antwoord 5, autoriteit 4%
Alle antwoorden lijken behoorlijk oud 🙂 Ik heb liever een CSS-raster voor een betere paginalay-out (absolute
divs kunnen worden overschreven door andere divs op de pagina.)
<div class="container">
<div class="inner" style="background-color: white;"></div>
<div class="inner" style="background-color: red;"></div>
<div class="inner" style="background-color: green;"></div>
<div class="inner" style="background-color: blue;"></div>
<div class="inner" style="background-color: purple;"></div>
</div>
<style>
.container {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: yellow;
/* important part */
display: grid;
place-items: center;
grid-template-areas:
"inner-div";
}
.inner {
height: 100px;
width: 100px;
/* important part */
grid-area: inner-div;
}
</style>
Als je de paarse div verbergt met CSS, zie je de blauwe div bovenaan.
Hier is een werkende link
Antwoord 6, autoriteit 3%
style="position:absolute"
Antwoord 7, autoriteit 2%
Ik heb de div’s iets verschoven geplaatst, zodat je ze aan het werk kunt zien.
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
Antwoord 8
Ik had dezelfde eis die ik heb geprobeerd in onderstaande viool.
#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
Antwoord 9
Ik weet dat dit bericht een beetje oud is, maar ik had hetzelfde probleem en probeerde het enkele uren op te lossen. Eindelijk heb ik de oplossing gevonden:
als we 2 dozen absoluut hebben gepositioneerd
<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>
we verwachten wel dat er één vakje op het scherm zal staan. Om dat te doen moeten we margin-bottom gelijk stellen aan -height, dus als volgt te werk:
<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>
werkt prima voor mij.