CSS relative + right (или bottom) почти НИКОГДА не работает

Я писал CSS уже довольно давно.

Я заметил, что

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

никогда не работает!

относительное позиционирование будет работать с указанным слева и сверху, но не с правом/снизу. <Б > Почему?

Быстрое исправление вокруг этого заключается в том, чтобы вместо этого использовать "абсолютное" и указать "правое/нижнее" в пикселях, но мне нужна причина.

Кроме того, исправьте меня, если я ошибаюсь. Независимо от того, размещен ли внешний контейнер абсолютно или относительно, не имеет смысла позиционировать что-то "относительное" к границам этого контейнера или если элементы внутри контейнера всегда должны быть "абсолютными"?

Спасибо.

Ответ 1

От Абсолютное и относительное объяснение CSS-позиционирования

Относительное позиционирование использует те же самые четыре свойства позиционирования, что и абсолютное позиционирование. Но вместо того, чтобы основывать позицию элемента на порте просмотра браузера, он начинается с того, где будет элемент, если он все еще находится в нормальном потоке.

Ответ 2

Относительное позиционирование работает с нижними/правыми значениями, просто не так, как вы ожидали:

http://cssdesk.com/RX24j

Подумайте о значениях позиции относительных элементов в качестве полей, которые окружающие элементы просто игнорируют. "Поля" всегда перемещают элемент по отношению к предыдущей позиции в нормальном потоке документа, но одновременно удаляют его из обычного потока.

Когда из нормального потока документов окружающие элементы действуют так, как если бы они находились в исходном положении в нормальном потоке... но это не так. Вот почему относительный элемент может перекрывать его родительский (как в Rel 1).

Ответ 3

Вы пробовали это?

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

или скорее

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