wie man zwei divs übereinander positioniert

Lesezeit: 2 Minuten

Benutzer-Avatar
trrrrrm

Gibt es eine Möglichkeit, Divs vom selben Punkt aus zu zeichnen? Das heißt, wenn ich ein neues div hinzufüge und dann ein weiteres div hinzufüge, werden sie übereinander angezeigt. Weil ich sie alle zusammen in Abhängigkeit vom selben Punkt verschieben möchte.

CSS:

#num1,#num2{
    display : inline
    position:relative;
    left:50px;
}

HTML:

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

Was soll ich also zu diesem Code hinzufügen, damit sich die beiden Divs an derselben Stelle befinden, wenn der Browser diesen Code rendert?

Benutzer-Avatar
Corey Ballou

Alle Aussagen zur absoluten Positionierung sind korrekt. Die Leute haben jedoch nicht erwähnt, dass Sie es brauchen Position: relativ auf dem übergeordneten Container.

#container {
  position: relative;
}
#num1,
#num2 {
  position: absolute;
  left: 50px;
}
<div id='container'>
  <div id='num1'>1</div>
  <div id='num2'>2</div>
</div>

Je nachdem, welches Element Sie oben haben möchten, können Sie es anwenden z-indexes zu Ihren absolut positionierten Divs. Ein höherer Z-Index verleiht dem Element mehr Bedeutung und platziert es über den anderen Elementen:

#container {
  position: relative;
}
#num1,
#num2 {
  position: absolute;
  left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
  z-index: 1;
}
#num2 {
  z-index: 2;
}
<div id='container'>
  <div id='num1'>1</div>
  <div id='num2'>2</div>
</div>

  • Was ich mache, ist, die Divs in verschiedenen Farben zu machen und dann eine andere Größe zu machen, damit ich sagen kann, welche oben ist. Dann ändere ich es wieder so, wie ich es brauche.

    – tahdhaze09

    2. Dezember 2009 um 18:34 Uhr

  • @tahdhaze09: Wenn Sie es nur mit zwei absolut positionierten Divs zu tun haben, müssen Sie nur eine Hintergrundfarbe ändern. Wenn Sie die Farbe sehen, ist sie eindeutig oben 😛

    – Corey Ballou

    2. Dezember 2009 um 18:37 Uhr

  • @Laith – Übliche Praxis bei Stack Overflow ist es, die richtigste und vollständigste Antwort als richtig zu akzeptieren, wenn sie Ihr Problem behebt oder Ihre Frage beantwortet.

    – Corey Ballou

    2. Dezember 2009 um 21:43 Uhr

Benutzer-Avatar
tahdhaze09

Verwenden Sie den Z-Index, um Divs übereinander zu positionieren:

[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]

Sie positionieren also die Divs mit absoluter/relativer Positionierung und verwenden dann den Z-Index, um sie zu überlagern:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

  • Antworten Sie bitte in sich abgeschlossen. Diese Beschreibung ist nicht sehr hilfreich, ohne die verlinkten Webseiten zu lesen, die im Laufe der Zeit verschwinden oder sich ändern können.

    – Kissaki

    21. August 2021 um 15:17 Uhr

Machen Sie die erste position:absolute, was sie aus dem normalen Fluss der Seite herausnehmen sollte.

etwas Hilfe.

Ich glaube, die einzige Möglichkeit, dies zu tun, besteht darin, die absolute Positionierung zu verwenden

Sie können die absolute Positionierung verwenden.

  #num1,#num2{ display : inline position:absolute; left:50px;top:10px; }

1379340cookie-checkwie man zwei divs übereinander positioniert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy