Wie kann ich überlappende Divs mit relativen Positionen erhalten?

Lesezeit: 5 Minuten

Benutzer-Avatar
Tilman Baumann

Ich möchte, dass einige Divs in einer Linie nebeneinander positioniert werden, aber auch zulassen, dass sie das vorherige Div überlappen.

Was ich versuche zu bekommen, ist eine Zeitleiste mit Divs für Ereignisse bestimmter Länge. Die Ereignisse können sich überschneiden.

Meine Idee war, jedem Div die gleiche obere Position, einen zunehmenden Z-Index und eine zunehmende linke Position (je nach Zeitpunkt des Ereignisses) zu geben. Später würde ich einzelne Divs durch Mouseover-Ereignisse ausblenden, um die Überlappung zu visualisieren.

Was ich tue, ist, es so zu machen, dass jedes div unter dem nächsten platziert wird. Durch Fummeln des oberen Attributs kann ich sie horizontal ausrichten, aber ich sehe das Muster nicht.

 <div class="day">
         <div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
         <div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
         <div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
 </div> 

Wenn ich absolute Positionen verwende, fliegen die Elemente aus dem umgebenden Div heraus und werden absolut an einer Stelle auf der Seite positioniert.

Benutzer-Avatar
Mahendra Mustika Wijaya

Es ist einfach. Erstellen Sie ein inneres div mit absolute Positionierung aber gewickelt mit einem div, das verwendet relative Positionierung:

<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
    <div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
    <div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>

Sie können eine andere Methode wie negative Marge verwenden, aber es wird nicht empfohlen, wenn Sie HTML dynamisch ändern möchten. Wenn Sie beispielsweise die Position des/der inneren Div(s) verschieben möchten, legen Sie einfach die oberen/linken/rechten/unteren CSS-Eigenschaften des Containers fest oder ändern Sie die Eigenschaften mit JavaScript (jQuery oder auf andere Weise).

Es wird Ihren Code sauber und lesbar halten.

  • Das ist perfekt, danke. Ich frage mich, warum fast niemand darauf antworten konnte

    – Partha

    15. Mai 2019 um 16:52 Uhr

  • Aber wenn Sie es so machen, müssen Sie die Breite und Höhe für das Umhüllungs-Div festlegen … Es passt sich nicht automatisch an die Breite und Höhe der Kinder an.

    – FireFuro99

    20. Mai um 0:00 Uhr

Benutzer-Avatar
Praveen Kumar Purushothaman

Verwenden Sie negative Margen!

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>

Geige: http://jsfiddle.net/vZv5k/


Eine andere Lösung:

Gib die .day Klasse a width, heightund position es relatively, halten das Innere divs absolutely positioned.

Schauen Sie sich das unten an CSS:

.day {position: relative; width: 500px; height: 500px;}

Und die HTML:

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>

  • Beim Lesen fiel der Groschen developer.mozilla.org/en-US/docs/CSS/position Ich konnte keine absolute Position verwenden, da die ganze Seite zu meinem Anker für Positionen werden würde. Aber wenn ich position: relative in das umgebende div (Tagesklasse) einfüge, kann ich meine Blöcke absolut relativ zu diesem div positionieren.

    – Tilman Baumann

    23. November 2012 um 17:01 Uhr


Ich habe die Lösung gefunden. Es ist wahrscheinlich für jeden, der sich mit CSS auskennt, offensichtlich.

Ich dachte, ich könnte keine absolute Positionierung verwenden, weil meine Elemente aus dem umgebenden div herausfliegen würden.

Es stellt sich heraus, dass ich die absolute Positionierung falsch verstanden habe. Es ist nicht dasselbe wie fest, aber für mich sah es so aus.

https://developer.mozilla.org/en-US/docs/CSS/position erklärt es gut.

Absolute Positionierungspositionen absolut zum nächsten umgebenden Anker. Das ist standardmäßig die ganze Seite, wenn kein anderer Anker definiert ist. Um etwas zu einem Anker zu machen, muss es position: relative;

Schnelle Lösung

hinzufügen Position: relativ; zur Tagesklasse und mit absoluter Positionierung im inneren div.

  • Ja, aber in diesem Fall müssen Sie festlegen width und height für die .day Klasse.

    – Praveen Kumar Purushothaman

    23. November 2012 um 17:12 Uhr

  • Sieht gut aus. Sie können auch negative Margen verwenden, oder? Wird meine Antwort helfen? jsfiddle.net/vZv5k

    – Praveen Kumar Purushothaman

    23. November 2012 um 17:21 Uhr

  • Das nehme ich an. Es sieht nur so aus, als könnte es ziemlich schwierig werden, den Come-Effekt zu kompensieren. Die absolute Position scheint sauberer zu sein.

    – Tilman Baumann

    23. November 2012 um 17:35 Uhr

  • In meinem Fall wollte ich das innere div mit gleicher Höhe des übergeordneten, dann setzen top: 0; bottom: 0;.

    – João Paulo

    1. Februar 2018 um 16:33 Uhr

Mit dem top -Attribut können Sie auch relativ positionierte Objekte verschieben. In meinem Codebeispiel überlappt das rote Kästchen das grüne Kästchen aufgrund dessen z-index. Wenn Sie die entfernen z-indexdann ist das grüne Kästchen oben.

HTML:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

 .box {
  width: 100%;
  height: 100%;
  position: relative;
}

 .box.one {
  background-color: red; 
  z-index: 2;
  top: 0px;
}

 .box.two {
  background-color: green; 
  z-index: 1;
  top: -50px;
}

1185930cookie-checkWie kann ich überlappende Divs mit relativen Positionen erhalten?

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

Privacy policy