Nach rechts schweben und Position absolut funktioniert nicht zusammen

125

Ich möchte, dass ein Div immer rechts von seinem übergeordneten Div steht, also benutze ich float:right. Es klappt.

Ich möchte aber auch, dass es beim Einfügen keine Auswirkungen auf andere Inhalte hat, also verwende ich position:absolute.

Funktioniert jetzt float:rightnicht, mein div befindet sich immer links vom übergeordneten div. Wie kann ich es nach rechts verschieben?

Trbaphong
quelle

Antworten:

294

Verwenden

position:absolute; right: 0;

Keine Notwendigkeit float:rightmit absoluter Positionierung

Stellen Sie außerdem sicher, dass das übergeordnete Element auf festgelegt ist position:relative;

eivers88
quelle
Wie kann ich das tun, wenn ein Such-Div in der Mitte des übergeordneten Elements steht?
Trbaphong
Danke für Ihre Hilfe. Ich benutze left:50%und margin-left:-??px(?? abhängig von Ihrer Div-Breite)
Trbaphong
Mit der Antwort von @ eivers88 muss ich noch 'overflow-y: auto;' entfernen. vom übergeordneten Element, damit es funktioniert.
Angelokh
was ist, wenn div Breite ist dynamisch
Muhammad Umer
2
Ok, ich habe diesen Float: rechts wird für die absolute Positionierung nicht benötigt, aber ... Was ist, wenn Sie zwei absolute Elemente in demselben (Position: relativ) übergeordneten Element haben und möchten, dass sie rechts nebeneinander ausgerichtet sind? Ihre Breite ist dynamisch ...
Spuas
26

Im Allgemeinen floathandelt es sich um eine relative Positionierungsanweisung, da sie die Position des Elements relativ zu seinem übergeordneten Container angibt (nach rechts oder links schwebend). Dies bedeutet, dass es nicht mit der position:absoluteEigenschaft kompatibel ist , da position:absolutees sich um eine absolute Positionierungsanweisung handelt. Sie können entweder ein Element schweben lassen und dem Browser erlauben, es relativ zu seinem übergeordneten Container zu positionieren, oder Sie können eine absolute Position angeben und das Element zwingen, unabhängig von seinem übergeordneten Element an einer bestimmten Position angezeigt zu werden. Wenn Sie möchten, dass ein absolut positioniertes Element auf der rechten Seite des Bildschirms angezeigt wird, können Sie es verwenden position: absolute; right: 0;. Dadurch wird das Element jedoch immer am rechten Rand des Bildschirms angezeigt, unabhängig davon, wie breit das übergeordnete Element divist (also hat es gewonnen). t sei "rechts von seinem Eltern-Div").

Edward
quelle
3
Wenn dies der Fall divist position: relative, befindet sich dieser divrechts neben dem übergeordneten Element und nicht auf dem Bildschirm.
Trysis
3

Sie können " translateX (-100%) " und " text-align: right " verwenden, wenn Ihr absolutes Element " display: inline-block " ist.

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Sie erhalten ein absolutes Element, das auf den rechten Verwandten ausgerichtet ist

Alexander Ivashchenko
quelle
2

Vielleicht sollten Sie Ihren Inhalt wie folgt mit Floats teilen:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

Beachten overflow: auto;Sie Folgendes : Dies soll sicherstellen, dass Ihr Container eine gewisse Höhe hat. Durch schwebende Objekte werden sie aus dem DOM entfernt. Um sicherzustellen, dass sich Ihre Elemente unten nicht mit Ihren wandernden Schwimmern überschneiden, stellen Sie einen Container divmit einem overflow: auto(oder overflow: hidden) ein, um sicherzustellen, dass Schwimmer beim Zeichnen Ihrer Höhe berücksichtigt werden. Weitere Informationen zu Floats und deren Verwendung finden Sie hier .

Cereallarceny
quelle
0

Ich konnte ein rechts schwebendes Element mit einer Verschachtelungsschicht und einem kniffligen Rand absolut positionieren:

function test() {
  document.getElementById("box").classList.toggle("hide");
}
.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}
<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Ich habe beschlossen, dies umschaltbar zu machen, damit Sie sehen können, wie es den Fluss des umgebenden Textes nicht beeinflusst (führen Sie es aus und drücken Sie die Taste, um das schwebende absolute Feld ein- / auszublenden).

Adam Katz
quelle