I'm sad that this still happens (at least, for sticky top bars), but in the mean time, here's a stylesheet override that fixes the issue while also not messing with the site in other ways:
iframe.snippet-box-edit[style*="fixed"] {
top: 60px !important;
height: calc(100% - 60px) !important;
}
You can install it with Stylish (Chrome, Firefox, home page) or something. AFAIK calc
is widely supported. 60px
seems to be the hard coded top bar height from all.css, so it should always line up. Replace it with whatever if you're using a custom top bar stylesheet with a narrower bar.
Just in case it's not clear, this is a style that needs to be applied to the site, not used in your snippet. It will fix it for all snippets.
body { margin-top: 4em; }
z-index
(1050) is greater than stack-snippets'sz-index
(1030).