Позиционирование CSS – это фундаментальная тема для каждого веб-разработчика. Без четкого понимания этого механизма невозможно создать сложную, адаптивную и визуально привлекательную верстку сайта. Данный урок поможет вам раз и навсегда освоить управление расположением любых элементов на странице.
Основу этого управления задает свойство position css. Оно определяет, по какому алгоритму будет размещен элемент относительно его стандартного положения в потоке документа или других объектов. Существует четыре основных типа позиционирования CSS:
Конкретные координаты для смещения задаются с помощью знакомых свойств: top, bottom, left, right. Они указывают расстояние от соответствующего края элемента-предка (в зависимости от типа position css).
Когда элементы накладываются друг на друга, возникает вопрос видимости: какой из них должен быть сверху? Ответ дает свойство z-index. Оно контролирует порядок по оси Z, создавая css слои. Чем выше значение z-index, тем "ближе" к пользователю будет находиться элемент. Понимание этого свойства критически важно для работы со сложными макетами, выпадающими меню и модальными окнами.
Верстка сайта, основанная на грамотном комбинировании position: absolute и position: relative, является профессиональным стандартом. Освоив эти основы css, вы получите полный контроль над расположением каждого пикселя на вашей веб-странице и сможете реализовывать любые дизайнерские задумки.