Я писал CSS уже довольно давно.
Я заметил, что
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
никогда не работает!
относительное позиционирование будет работать с указанным слева и сверху, но не с правом/снизу. <Б > Почему?
Быстрое исправление вокруг этого заключается в том, чтобы вместо этого использовать "абсолютное" и указать "правое/нижнее" в пикселях, но мне нужна причина.
Кроме того, исправьте меня, если я ошибаюсь. Независимо от того, размещен ли внешний контейнер абсолютно или относительно, не имеет смысла позиционировать что-то "относительное" к границам этого контейнера или если элементы внутри контейнера всегда должны быть "абсолютными"?
Спасибо.
От Абсолютное и относительное объяснение CSS-позиционирования
Относительное позиционирование использует те же самые четыре свойства позиционирования, что и абсолютное позиционирование. Но вместо того, чтобы основывать позицию элемента на порте просмотра браузера, он начинается с того, где будет элемент, если он все еще находится в нормальном потоке.
Относительное позиционирование работает с нижними/правыми значениями, просто не так, как вы ожидали:
Подумайте о значениях позиции относительных элементов в качестве полей, которые окружающие элементы просто игнорируют. "Поля" всегда перемещают элемент по отношению к предыдущей позиции в нормальном потоке документа, но одновременно удаляют его из обычного потока.
Когда из нормального потока документов окружающие элементы действуют так, как если бы они находились в исходном положении в нормальном потоке... но это не так. Вот почему относительный элемент может перекрывать его родительский (как в Rel 1).
Вы пробовали это?
<div style="position: relative; right: -20%; bottom: -20%;">some text</div>
или скорее
<div style="position: relative; right: -80%; bottom: -80%;">some text</div>