That's what the position:relative on the parent does. It creates a local stacking context fro the absolute element and the absolute element is then tied to that starting point
The problem on smaller screens (which I didn't notice earlier) is that you have a fluid width page and therefore as the page gets smaller the absolute element still stays in exactly the place it was put but will then overlap anything in the way because absolute elements are removed from the flow and in a fluid environment you don;t want absolute elements.
Instead you should float the button and let it take part in the flow but you will need to adjust the html.
First you will need to add a class to the form inputs and float the block.
<p[B] class="forminputs"[/B]><span class="wpcf7-form-control-wrap your-name"><input etc......
Then you will need css like this:
Or alternatively move the button before that p element in the html and just float it right (remembering to remove the absolute positioning).