Относительное позиционирование - это стандартное размещение элементов.
Абсолютное позиционирование - всплывающие окна, слайдеры, выпадающие меню и т. д.
Верстка, CSS, HTML, SVG
Объясните простым языком, для чего вообще используют относительное или абсолютное позиционирование?
Относительное - чтобы, например, кнопки не выезжали за пределы постов, а находились строго справа\слева от него.
Абсолютное (position:absolute) полезнее в пользовательских стилях, чем в обычных, но если очень надо что-то разместить именно в определённой точке на странице, тоже может пригодиться (кому-нибудь, когда-нибудь).
А ещё position:fixed часто используется для кнопок, которые должны оставаться на экране при прокрутке страницы.
Абсолютное (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
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
:)
Похожие вопросы
- Относительный или абсолютный путь
- Кто может объяснить самым простым языком, что такое лендинг? (В контексте "html лендинг сайта")
- Какая CMS (движок сайта, выражаясь простым языком) на Ваш взгляд лучшая и почему?
- Программисты, за сколько вы готовы сделать простой, обычный сайт на любом языке про Торговый центр?
- Объясните какие и для чего языки программирования используются в веб-программирование?
- Какие цвета использовать при создании сайта?
- Когда использовать префиксы в css?
- CSS и HTML pеально ли выучить самому эти языки программирования?
- HTML. Как можно использовать знания HTML в повседневной жизни?
- Какая CMS для интернет магазина на ваш взгляд наиболее лучше продвигается используя CEO ( без рекламы)
1. Абсолютное позиционирование идёт относительно охватывающего блока с position: relative. И только если такого блока нет, тогда от окна браузера.
2. А что, bottom тоже от верхнего угла считается? Или всё же - как и положено - от нижнего?