Верстка, CSS, HTML, SVG

Объясните простым языком, для чего вообще используют относительное или абсолютное позиционирование?

Mikle T
Mikle T
1 479
Относительное позиционирование - это стандартное размещение элементов.
Абсолютное позиционирование - всплывающие окна, слайдеры, выпадающие меню и т. д.
Азамат Кулдышев
Азамат Кулдышев
54 770
Лучший ответ
Относительное - чтобы, например, кнопки не выезжали за пределы постов, а находились строго справа\слева от него.
Абсолютное (position:absolute) полезнее в пользовательских стилях, чем в обычных, но если очень надо что-то разместить именно в определённой точке на странице, тоже может пригодиться (кому-нибудь, когда-нибудь).
А ещё position:fixed часто используется для кнопок, которые должны оставаться на экране при прокрутке страницы.
Чаще всего, относительное позиционирование одному элементу необходимо, чтобы "привязать" к нему другие элементы – абсолютно позиционированные ( т. е. когда нужно расположить элементы в определенном месте, а не в обычном потоке) – это могут быть иконки, стрелки в слайдере, выпадающие меню, эффекты при наведении и т. д. и т. п.). Например:
static: элемент в потоке, top/bottom/left/right/z-index не работают

relative: элемент в потоке, работают параметры top/bottom/left/right - при этом сдвигают элемент относительно места в потоке. Так же работает z-index

absolute: элемент вне потока, работают параметры top/bottom/left/right - при этом задают координаты относительно ближайшего relative/absolute родителя. Так же работает z-index

fixed: элемент вне потока, работают параметры top/bottom/left/right - при этом задают координаты относительно границ окна браузера. Так же работает z-index

Используются ровно там где это нужно - все зависит от необходимости, фантазии и целесообразности - все исходя из свойств.
1) Нужно всплывающее окно которое будет отодвигать остальные блоки в сторону - используйте static.
2) Нужно всплывающее окно в верхнем углу экрана - используйте fixed.
3) Нужно всплывающее окно всплывающее поверх определенного блока - используйте связку relative/absolute или absolute/absolute
Все вышесказанное относится также к любому другому случаю. Вариантов масса - все зависит от того что вам нужно

Иногда приходится менять позиционирование на лету, кроме того есть масса нюансов по использованию, например если абсолютному элементу не задать left/right или задать его в виде auto. - absolute элемент будет позиционироваться не по левому краю relative родителя а просто по по левому краю родителя - даже если тот static - и сдвинуть данный элемент относительно static родителя тоже можно - задав margin-left - и это тоже полезно знать и приходится постоянно использовать.

Например таким образом легко cпозиционировать любой absolute блок с известной шириной по центру relative/absolute родителя - задав left: 50% и margin-left: -(половина ширины сдвигаемого блока) px
Garo Engibaryan
Garo Engibaryan
3 843
:)
Азамат Кулдышев Бред.

1. Абсолютное позиционирование идёт относительно охватывающего блока с position: relative. И только если такого блока нет, тогда от окна браузера.

2. А что, bottom тоже от верхнего угла считается? Или всё же - как и положено - от нижнего?