The whole overlapping business is kinda unavoidable because you are basically positioning the prompt input relative to the window instead of content which naturally takes the prompt out of the content flow.
There are ways using CSS and a little bit of JavaScript to fix your issues. However, the streamlit-float package, which @Odrec recommended, has functions that do these things for you. The whole package is based on/relies on the CSS trick @Odrec laid out with a few more tricks used to get theme and make sure everything works in all browsers. The package can also keep your pdf in view. The first use case was actually keeping content in a column always in view and prevent it from getting scrolled away:
I also provide a solution to your transparent prompt issue using the package in this post (although, the float_init() function call is missing in the code there):
And finally, you can find info on installation of streamlit-float on github: