Почему margin-right не работает для блочного элемента с position:absolute? а например margin-left работает в подобной ситуации?

Question

[Юра Сторчака]

Привет, подскажите пожалуйста , почему
margin-right не работает для блочного элемента с position:absolute
а например margin-left работает для блочного элемента с position:absolute
https://codepen.io/yrchik/pen/gOOOxpB

Answer 1

[азаза]

а позиционирование откуда и куда?
по дефолту скорее
left top
вот и размышляйте
если прижат к левому краю, какие нахрен отступы будут справа

сделайте то же
только задайте right top
та же ситуация будет с margin left

т.е позиция right не определена
определена только позиция left,top

Comments

[Юра Сторчака]

Так я ставлю margin-left: -20px; должно же смещать в обратную сторону

Answer 2

[Александр Осадчий]

Для позиционирования 'absolute' - margin не применяется
margin отлично применяется к position: relative;

Выше правильно написали, при 'position: absolute;' нужно использовать top, left, right, bottom - 'top: 0;' и т.д

еще, как вариант, можно использовать свойство 'transform', например вам нужно выставить элемент по центру (и по горизонтали, и по вертикали)

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Comments

[азаза]

margin как раз таки применяется при абсолютном позиционировании, только от той стороны, от которой позиционируется
напр:
есть блок, который нужно отцентрировать по горизонтали
в таком случаи даем ему position absolute left:50%
и margin минусуем половину этого блока

как то так

если не понятно, скину ссылку

[Александр Осадчий]

natojezlo, приведите пример пожалуйста, где есть необходимость использовать margin при position: absolute

[азаза]

Александр Осадчий,
https://codepen.io/natojezlo/pen/VwweVmq

[азаза]

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

[Александр Осадчий]

natojezlo, Но, мне кажется - это "костыльный" вариант..

[Павел Баранов]

Александр Осадчий, Я бы тоже не стал отбрасывать данную особенность по двум причинам:
1. Вариант с margin более кроссбраузерный, чем с transform. Если известны размеры элемента и стоит задача оптимизировать под любимый IE, то вполне можно использовать и этот вариант.
2. Как уже было сказано, margin для absolute работает только с заданной позиционированием стороной. Но, если задать все 4 значения: left, right, top, bottom в значение 0, то сработает margin: auto; Вот такая вот особенность.