Whoops, thanks for the spot, Steven!

And I had a similar issue attempting to save a page with an (uneditable) InfoBox on the right hand side. Luckily a simple workaround for the moment is to scroll down!

Obviously the proper solution is to ensure the zorder of the "Review your changes" and "Save your changes"/"Report a problem" is above the "phantoms".

Instead of an arms race between z-index, the much easier solution would be to ensure the DOM structure of these two elements are nested properly so that their natural order is correct. z-index can be used to adjust display, but it is not capable (by design) to transcend the relative DOM position.

I haven't tested the following so this exact example could be wrong, but generally it means that in the following sample:

<div style="position: relative;" id="foo"> </div>
<div style="position: relative;" id="bar"> </div>

Naturally #bar will be on top of #foo as it comes later in the DOM. Though #foo and #bar can be interchanged at the root (through their common parent), any child of #bar will always be on top of any child of #foo.

So not only is DOM ordering easier to manage (due to not having to worry about conflicting numbers), in some cases it is the only way.

I'll see what the easier way to fix this is, we can perfect it later if suboptimal.

Just a note that this also happens with editable elements like images, as their blue overlay extends on top of the VE menu bar.

Related URL: https://gerrit.wikimedia.org/r/69614 (Gerrit Change I2fbc4c8af943f1b096b8912191924961405d5c47)

Merged and will go out later today.