@Conera

Как работает абсолютное позиционирование?

Добрый день, правильно ли в таком случае(на скрине) пользоваться позиционированием - наложить на инпут иконку отправки https://hsto.org/webt/60/91/dc/6091dcd571c87164940....
Если нет - то как правильно?
если да - то как правильно адаптировать, чтобы не слезало?
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 3
@alekcena
В попытках обрести навыки и умения
Вариантов решения несколько.
1) Можно сделать картинку внутри блока(Блок заливаем цветом, картинку ставим по центру);
2) Сразу через background задаём и заливку и картинку.
3) Через before, after и абсолютное позиционирование ставим в центр.
4) Создаём отдельный блок и абсолютно позиционируем.

На счёт правильности:
Конкретного ответа нет. Там много нюансов. Чаще всего встречается (2,3) вариант
Стоит понимать что любое решение может существовать для конкретных задач.
Ответ написан
@trenton
в партии с relative. Relative - это относительно чего прибивать, а абсолют - это что прибивать. Оно как бы висит в воздухе, и не занимает обычного пространства. Если читать сложно = хороший урок у Дмитрия Лаврика.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Не ясно зачем абсолюты для блоков стоящих рядом.
Без абсолютов, гридами: https://jsfiddle.net/n140gybm/
Ещё проще флексами: https://jsfiddle.net/1h6oc0tj/

Другой вариант, если всё таки хочется наложить один элемент на другой, тоже гридами:
https://jsfiddle.net/6ovy23w5/
Чтобы не нужно было следить за правым паддингом можно разбить грид на 3 колонки. Среднюю сделать шириной равной закруглению бордера. Input будет занимать первые две ячейки, кнопка, соответственно, последние две.
Скругление бордера при этом задавать с помощью кастомного свойства или переменной.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы