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

126

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?

trbaphong
źródło

Odpowiedzi:

294

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;

eivers88
źródło
jeśli chcesz div w środku elementu nadrzędnego, jak mogę to zrobić?
trbaphong
Dzięki za pomoc. Używam left:50%i margin-left:-??px(?? zależy od szerokości twojego div)
trbaphong
Dzięki odpowiedzi @ eivers88 nadal muszę usunąć „overflow-y: auto;” z elementu nadrzędnego, aby działał.
angelokh
co, jeśli szerokość div jest dynamiczna
Muhammad Umer,
2
Ok, mam to float: prawo nie jest potrzebne do pozycjonowania absolutnego, ale ... A co z dwoma elementami absolutnymi wewnątrz tego samego (pozycji: względnej) rodzica i chcesz, aby były wyrównane do prawej strony, jeden obok drugiego? Ich szerokość jest dynamiczna ...
spuas
26

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

Edward
źródło
3
Jeśli rodzic divjest position: relative, divzostanie umieszczony po prawej stronie tego rodzica, a nie na ekranie.
trysis
3

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

Aleksandra Iwaszczenki
źródło
2

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 .

cereallarceny
źródło
0

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

Adam Katz
źródło