Unfortunately this is exactly how I embedded the custom google search into the site and it still results in the website elements overlapping the search results. I even changed the layer order so that the embedded HTML is a top layer, but still have the problem. Then I move the google search bar to the header thinking that maybe the location in the footer was causing the problem. Nope still have the issue when it was moved. I really don't know what else to try.
OK! I think I found a work around for the time being!
Looks like (at least for this site) I cannot have the Custom Google HTML code on the master pages. When I had the code on the master page regardless of the layer order the other website elements always overlapped the search results. However when I removed the code from the Master pages and embedded the code into the individual pages and rearranged the layers its all working perfect now.
So looks like I'm up and running again and the search is working great now with it on individual pages.
Here you go, wonder that didn't come in my mind as it the most usual solution of such overlapping issues.
well, thank you for the refresher.