Почему отрицательный left + положительный margin в сумме ведут себя нелогично и неадекватно?

Question

[Алексей Николаев]

Доброго дня.
Ситуация 1: свойство left установлено в -50%, свойство margin-left - в 300px. Поведение нелогичное и неадекватное. Я ожидал, что блок inner будет спозиционирован четко по центру вне зависимости от размеров вьюпорта.

Ситуация 2: свойство left установлено в 50%, свойство margin-left - в -300px. Поведение именно то, какое я и ожидал - блок inner позиционируется четко по центру вне зависимости от размеров вьюпорта.

Для воспроизведения достаточно пару раз изменить размер фрейма с результатами рендера.

Почему такая огромная разница от простейшей смены знаков? С чем связано?
Заранее спасибо.

Comments

[Алексей Николаев]

Сергей Тутуков: Что вы имеете в виду? Код в обеих фиддлах абсолютно одинаковый, элементы абсолютно спозиционированы. Отличаются только значения указанных свойств.

[Сергей Тутуков]

Алексей Николаев: Не особо понимаю. Тут же все предельно просто.
В первом случаи

left: -50%;
margin-left: 300px;

Например:
1. ширина экрана 1000px, следовательно .wrap будет равен 80vw=800px. Далее считаем свдиг .inner относительно ширины .wrap на left: -50%;, то есть сдвиг на -400px и далее идет margin-left: 300px;, что даст в сумме -400px + 300px = -100px.
2. ширина экрана 100px, следовательно .wrap будет равен 80vw=80px. Далее считаем свдиг .inner относительно ширины .wrap на left: -50%;, то есть сдвиг на -40px и далее идет margin-left: 300px;, что даст в сумме -40px + 300px = 260px.

[Алексей Николаев]

Сергей Тутуков: все, я понял, спасибо. Не стоило прогуливать математику в школе...

[Егор Живагин]

Алексей Николаев: я просто посоветую старый метод центрирования, на всякий случай. Работает при любых размерах.

position: absolute; // relative / fixed тоже
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

Соответственно, чтобы выровнять по горизонтали нужно убрать top и сделать transform: translateX(-50%);

Answer 1

[Владислав Старцев]

Потому что элемент позиционируется относительно той стороны которую вы указываете.

Если left: 0; то элемент позиционируется слева, если left: -50%, то он позиционируется на 50% левее левой границы родительского блока, при этом margin-left отодвигает его на 300px правее, когда ставите left: 50%, то левая сторона элемента позиционируется по середине, а margin-left: -300px сдвигает его влево на 300px.
но вообще лучше использовать просто left: calc(50% - 300px); без margin-left.

Comments

[Алексей Николаев]

Спасибо, теперь все ясно