it-swarm.com.de

Schweben Sie nach rechts und Position absolut funktioniert nicht zusammen

Ich möchte, dass ein div immer auf der rechten Seite des übergeordneten div ist, daher verwende ich float:right. Es klappt.

Ich möchte aber auch, dass andere Inhalte beim Einfügen nicht betroffen sind. Ich verwende position:absolute.

Nun funktioniert float:right nicht, mein div steht immer links von seinem übergeordneten div. Wie kann ich es nach rechts verschieben?

113
trbaphong

Benutzen

position:absolute; right: 0;

Keine Notwendigkeit für float:right mit absoluter Positionierung

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

261
eivers88

Im Allgemeinen ist float eine relative Positionierungsanweisung, da sie die Position des Elements relativ zu seinem übergeordneten Container (nach rechts oder links schwebend) angibt. Dies bedeutet, dass es nicht mit der position:absolute-Eigenschaft kompatibel ist, da position:absolute eine absolute Positionierungsanweisung ist. Sie können ein Element entweder schweben lassen und es 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 zu erscheinen. Wenn Sie möchten, dass ein absolut positioniertes Element auf der rechten Seite des Bildschirms angezeigt wird, können Sie position: absolute; right: 0; verwenden. Das Element wird jedoch immer am rechten Rand des Bildschirms angezeigt, unabhängig davon, wie breit das übergeordnete div ist wird nicht "rechts von seinem übergeordneten div" sein).

26
Edward

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 nach rechts ausgerichtet relativ zum übergeordneten Element

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 Sie den overflow: auto;, um sicherzustellen, dass Ihr Container eine gewisse Höhe hat. Durch das Verschieben von Elementen werden diese aus dem DOM entfernt. Um sicherzustellen, dass die unten stehenden Elemente Ihre wandernden Floats nicht überlappen, legen Sie einen Container div fest, der über einen overflow: auto (oder overflow: hidden) verfügt, um sicherzustellen, dass Floats beim Zeichnen Ihrer Höhe berücksichtigt werden. Weitere Informationen zu Floats und deren Verwendung finden Sie hier hier .

2
cereallarceny

Ich konnte ein rechts schwebendes Element mit einer Schachtelungsebene 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 entschied mich dafür, dieses 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 die floated absolute Box anzuzeigen/auszublenden).

0
Adam Katz