By clicking on the search jumping height, and the loss of focus is normal, correct?

By clicking on the search jumping height, and the loss of focus is normal, correct?
https://codepen.io/anon/pen/WBBqLv
March 23rd 20 at 19:23
1 answer
March 23rd 20 at 19:25
Solution
@elvera, thank you
ie the basic gist is that needed to wraper to give relative
and the form - absolute parameters for the alignment? - Randi.Schuppe commented on March 23rd 20 at 19:28
@Randi.Schuppe, Well, look - if you focus on doing the form width :100% but the menu itself is not hidden and it is necessary either to remove the menu, and then done to shape 100% width or just put absolutely form but this requires the parent ie realtive - elvera commented on March 23rd 20 at 19:31
@elvera, OK
understand
why alignment is not only enough top : 50%
and need transform: translateY(-50%)? - Randi.Schuppe commented on March 23rd 20 at 19:34
@Randi.Schuppe, there is the usual math ... top : 50% will move the entire block relative to relative ...but translateY(-50%) will move at -50% on the Y-axis from the desired width of the block ie our form ..potreniruetes and see it in action - elvera commented on March 23rd 20 at 19:37
@elvera, thank you very much) - Randi.Schuppe commented on March 23rd 20 at 19:40
@elvera, why the search button gets a click? - Randi.Schuppe commented on March 23rd 20 at 19:43

Find more questions by tags LayoutHTMLCSS