Nach rechts schweben und Position absolut funktioniert nicht zusammen

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?

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;

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").

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

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 .

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).