Свойство position — один из тех разделов CSS, где новички чаще всего застревают надолго, хотя логика за ним довольно стройная, если разобрать каждое значение по отдельности. По умолчанию у любого элемента position static — он стоит в обычном потоке документа, там, куда его поставила разметка.
Relative смещает элемент относительно его собственного исходного положения через свойства top, left, right, bottom, но при этом место в потоке документа, где элемент стоял бы без смещения, остаётся зарезервированным. Соседние элементы не подвинутся, даже если сам блок визуально сдвинуть в сторону.
Absolute — куда более радикальный вариант: элемент полностью выпадает из обычного потока и позиционируется относительно ближайшего предка с position, отличным от static. Если такого предка нет, точкой отсчёта становится вся страница целиком, что часто и приводит к неожиданным результатам у новичков.
Именно поэтому на практике relative и absolute почти всегда используют в паре: на родительский контейнер ставят position relative без всякого смещения, просто чтобы создать точку отсчёта, а уже внутри него absolute-элемент позиционируется предсказуемо, в границах этого контейнера.
Fixed закрепляет элемент относительно окна браузера, а не страницы — при прокрутке такой блок остаётся на месте. Именно так чаще всего делают закреплённую шапку сайта или всплывающую кнопку "наверх" в углу экрана. Sticky — более гибкий вариант, который ведёт себя как обычный элемент, пока не достигнет заданной границы при прокрутке, а затем "прилипает" к ней.
Наглядные примеры для каждого значения position с интерактивными демонстрациями есть в статье про свойство position на MDN.
Стоит помнить, что элемент с position, отличным от static, автоматически получает возможность управлять порядком наложения через z-index. Без этого свойства элементы накладываются в порядке появления в разметке, а z-index позволяет явно указать, какой блок должен быть поверх остальных.
hgdfdxfghjkm,,
ОтветитьУдалитьvgh bn,m.,/>?
ОтветитьУдалить