Ruch w prawo i pozycja bezwzględna nie działają razem

Chcę, aby element div znajdował się zawsze po prawej stronie swojego nadrzędnego elementu div, więc używam float:right. To działa.

Ale chcę też, aby po wstawieniu nie wpływał na inne treści, więc używam position:absolute.

Teraz float:rightnie działa, mój element div jest zawsze po lewej stronie swojego nadrzędnego elementu div. Jak mogę przesunąć go w prawo?

Posługiwać się

position:absolute; right: 0;

Nie ma potrzeby float:rightz pozycjonowaniem absolutnym

Upewnij się również, że element nadrzędny jest ustawiony na position:relative;

Mówiąc ogólnie, floatjest to instrukcja pozycjonowania względnego, ponieważ określa pozycję elementu względem jego kontenera nadrzędnego (pływającego w prawo lub w lewo). Oznacza to, że jest niezgodny z position:absolutewłaściwością, ponieważ position:absolutejest to instrukcja pozycjonowania bezwzględnego. Możesz albo ustawić element pływający i pozwolić przeglądarce na ustawienie go względem jego kontenera nadrzędnego, albo możesz określić położenie bezwzględne i wymusić pojawienie się elementu w określonej pozycji, niezależnie od jego elementu nadrzędnego. Jeśli chcesz, aby element pozycjonowany absolutnie pojawił się po prawej stronie ekranu, możesz użyć position: absolute; right: 0;, ale spowoduje to, że element będzie zawsze pojawiał się na prawej krawędzi ekranu, niezależnie od tego, jak szeroki jest jego element nadrzędny div(więc wygrał) być „po prawej stronie macierzystego elementu DIV”).

Możesz użyć „ translateX (-100%) ” i „ text-align: right ”, jeśli Twoim elementem absolutnym jest „ display: inline-block ”

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

Otrzymasz element absolutny wyrównany do prawego względnego jego rodzica

Być może powinieneś podzielić swoje treści w ten sposób za pomocą pływaków:

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

Zwróć uwagę overflow: auto;, ma to na celu zapewnienie, że masz pewną wysokość do kontenera. Elementy pływające usuwają je z DOM, aby upewnić się, że elementy poniżej nie nakładają się na wędrujące elementy pływające, ustaw kontener tak, divaby miał overflow: auto(lub overflow: hidden), aby upewnić się, że elementy pływające są uwzględniane podczas rysowania wysokości. Więcej informacji o pływakach i sposobach ich używania znajdziesz tutaj .

Udało mi się całkowicie ustawić element pływający w prawo z jedną warstwą zagnieżdżenia i trudnym marginesem:

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>

Zdecydowałem się uczynić to przełączalnym, abyś mógł zobaczyć, jak nie wpływa to na przepływ otaczającego tekstu (uruchom go i naciśnij przycisk, aby wyświetlić / ukryć pływające pole bezwzględne).