CSS relative + right (lub bottom) prawie NIGDY nie pracuję

Question

Piszę CSS już od jakiegoś czasu.

Zauważyłem, że

<div style="position: relative; right: 20%; bottom: 20%;">some text</div> 

nie działa!

pozycjonowanie względne będzie działać z określonym lewym i górnym, ale nie prawym/dolnym. Dlaczego?

Szybka naprawa polega na użyciu "bezwzględnego" zamiast tego i określenia prawej/dolnej w pikselach, ale potrzebuję powodu.

Popraw mnie, jeśli się mylę. Niezależnie od tego, czy pojemnik zewnętrzny jest ustawiony absolutnie czy względnie, czy nie ma większego sensu umieszczanie czegoś "względnego" względem granic tego kontenera, czy też elementy wewnątrz kontenera zawsze powinny być ustawione "absolutnie"?

Dziękuję.

Answer 1

Z Absolute vs. Relative - Explaining CSS Positioning

pozycjonowania względnego wykorzystuje te same cztery miejsca pozycjonujące bezwzględne pozycjonowania. Ale zamiast oprzeć położenie elementu na porcie widoku przeglądarki, zaczyna się od miejsca, w którym element byłby, gdyby był nadal w normalnym przepływie.

Answer 2

Pozycjonowanie względne działa z dolnych/właściwych wartości, po prostu nie tak, jak się spodziewaliśmy:

http://cssdesk.com/RX24j

Pomyśl o wartości pozycji na elementach względnych jak marginesie, że sąsiednie elementy po prostu zignorować. "Marginesy" zawsze przesuwają element w stosunku do jego poprzedniej pozycji w normalnym obiegu dokumentów, ale usuwają je z normalnego przepływu w tym samym czasie.

Podczas normalnego obiegu dokumentów otaczające elementy zachowują się tak, jakby znajdowały się w pierwotnej pozycji w normalnym przepływie ... ale tak nie jest. To dlatego element względny może nakładać się na jego rodzic (jak w Rel 1).

Answer 3

Czy próbowałeś tego?

<div style="position: relative; right: -20%; bottom: -20%;">some text</div> 

czy raczej

<div style="position: relative; right: -80%; bottom: -80%;">some text</div>