Каким образом работает свойство position: absolute при отсутствии свойств right, left, top и bottom?

Question

[konstantinborodov]

https://jsfiddle.net/konstantinborodov/ag162gx4/1/

Собственно вопрос заключается на основе правила взятого с сайта htmlbook, применимого к свойству "absolute"
"Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom."

Картинка 1.


Красный блок в системе координат,где 0 - край браузера, находится левой гранью на +15, а паддинг родителя на 0

Картинка 2.


применили свойство position: absolute к красному блоку, и он вырывается из потока, соответственно пропадают родительские паддинги, но он остается на +15 по оси Х
а его ширина 100% и она увеличивается захватывая размеры паддингов родителя. С этим все понятно.

Собсвенно еще раз правило и вопрос по данной ситуации:
"Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom."

В примере мы видим что исходное положение осталось лишь у левой грани блока.

Долгожданный вопрос: по какой логике расчитывается исходное положение или чем регламентировано поведение что именно левая грань блока остается на месте, а он как бы растягивается слева направо а не наоборот?

Answer 1

[qpPeW]

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

Comments

[konstantinborodov]

То есть, то что у нас исходное положение блока отсчитывается от левой границы - это вопрос не сss, а более высокого уровня?

[qpPeW]

konstantinborodov: на 99% уверен что именно так и есть.
Это можно легко проверить, измените язык системы на "иврит" или арабский и тогда на 100% можно ответить на данный вопрос.

[Сергей delphinpro]

Artem Yur'evich: можно не менять язык, а применить свойство direction: rtl

[Сергей delphinpro]

konstantinborodov: направление письма можно явно указать в css/ так что хз какого уровня тут вопрос =)
Но Артем верно говорит - такое поведение обусловлено направлением письма, что в свою очередь зависит от языка пользователя.

[konstantinborodov]

Сергей: приписал в коде "фидла" что в верху поста в родительский контейнер direction: rtl(right-to-left), удивительно но вот стало отсчитываться от правой границы! очень круто) получается что по умолчанию в браузере прописано свойство direction: ltr(left-to-right)?

[qpPeW]

konstantinborodov:

[Сергей delphinpro]

konstantinborodov: да, круто =)
Когда еще не было флексов, я с помощью таблиц и этого свойства иногда имитировал то, что сейчас можно сделать свойствами display:flex + flex-direction:row-reverse

[konstantinborodov]

Сергей: Подытожим для тех кто войдет сюда за ответами: По умолчанию при изменениях за точку отсчета берется левый верхний угол контейнера, левый потому что по умолчанию direction:ltr, верхний потому что у нас поток сверху вниз, правильно?

Вопрос на засыпку а можем ли мы тоже самое проворачивать с вертикальной осью? чтобы к примеру у дива изменение height шло не вниз а наверх?