olya_097, проблема была в высоте заголовка ....просто надо было указать высоту и тогда изображение прижмётся к нему а так как нету высоты то браузер это делает автоматически т.е сдвигает картинку в низ
olya_097, тут обычная математика ... top : 50% сдвинет весь блок относительно релатива ...а вот translateY(-50%) сдвинет на -50% по оси Y именно от ширины нужного блока т.е нашу форму ..потренеруйтесь и увидите это в действии
olya_097, Ну смотри - ты при фокусе делаешь форме width :100% но само меню же не прячешь а надо либо убирать меню и потом делать для формы 100% ширину либо просто поставить абсолютно форму но для этого нужен родитель т.е realtive
olya_097, ну разумеется можно ...можно вообще сделать что угодно ..применяй ::after и ::before в качестве обводки разумеется ...и обязательно с background
