какие на сейчас популярные методы позиционирования элементов HTML на странице сайта
flexbox, css grid, position, абсолютное, относительное позиционирование, резиновый макет, фиксированный, floats - голова кругом идет. Понятно, что сейчас нужен адаптивный (раз!) и интерактивный (два!) сайт, заточенный под широкий круг устройств. Но как найти верное решение позиционирования? Какое использовать, чтобы время погружения в понимание предмета было не очень длительным и чтобы это решение было наиболее эффективное для разработки неодностраничного соврменного сайта. Получается такой вот философский вопрос. Какие решения используете вы? Посоветуйте, новичку.
Ответы (1 шт):
Если Вы только начинаете изучение, то для начала посмотрите что такое translate(), с его помощью Вы, например, сможете максимально просто и эффективно позиционировать объекты по центру:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
Далее рекомендую изучить и применять CSS Grid Layout, на данный момент это самый мощный и современный подход к организации layout'a.
На Июль 2020 года он поддерживается не так "глубоко" (iOS 10.3 и выше), но это всего лишь вопрос времени. Если у Вас нет задач поддерживать старые системы то это оптимальный выбор так как понимая Grid Вы уже без проблем будете понимать как работать с Flex и пр.