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:right
nie działa, mój element div jest zawsze po lewej stronie swojego nadrzędnego elementu div. Jak mogę przesunąć go w prawo?
left:50%
imargin-left:-??px
(?? zależy od szerokości twojego div)Mówiąc ogólnie,
float
jest 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 zposition:absolute
właściwością, ponieważposition:absolute
jest 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ędnydiv
(więc wygrał) być „po prawej stronie macierzystego elementu DIV”).źródło
div
jestposition: relative
,div
zostanie umieszczony po prawej stronie tego rodzica, a nie na ekranie.Możesz użyć „ translateX (-100%) ” i „ text-align: right ”, jeśli Twoim elementem absolutnym jest „ display: inline-block ”
Otrzymasz element absolutny wyrównany do prawego względnego jego rodzica
źródło
Być może powinieneś podzielić swoje treści w ten sposób za pomocą pływaków:
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,div
aby miałoverflow: auto
(luboverflow: 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 .źródło
Udało mi się całkowicie ustawić element pływający w prawo z jedną warstwą zagnieżdżenia i trudnym marginesem:
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).
źródło