Seems that cells’ source code will always be on top of the cells’ content:
As far as I understand this is not a bug (cells content is rendered in an iframe while source code is render in divs sibling to the iframe’s parent)
I understand that this might be the intended behaviors and change this might not be easy… just wanna ask if there is a possibility for any work around…
Of course, the issue disappears when you close the cell - right? And it never appears upon embedding. That is, it should never appear in a final product but only while editing, at which point you probably want to see the code.
As you surmised, this is by design. For security reasons, we don’t allow notebook content to overlay the Observable editor interface.
You can mitigate this problem somewhat by ensuring that cells are tall enough to contain their content (including any pop-ups), and by unpinning cells as needed so that the cell editors are not shown.