How to move the body on any site to embed the browser extension interface on top?

Question

css

The extension requires an interface visible on the page, I plan to place it above the page. I have access to the DOM and CSS, but I can't figure out how to make it work?

There are often sticky hats on top, which you don’t want to hide either, i.e. just making your sticky hat is not an option.
Indenting water also seems like a bad idea. there are sites that have their own indent, and overwriting it is dangerous.

Who has ideas?

Answer 1

If in simple terms:

If it’s more complicated: then you need to get the indent value using JS and increase it by the amount you need.

Answer 2

Why do you want to move body? Create a div anywhere, put CSS on it and that's it.