Inconsistent dropdown menu layering

[KatieWoe]

Test device
Dell
Operating System
Win 10
Browser
Chrome
Problem description
For phetsims/qa#470
The drop down menus have layering such that objects (such as the skater or movable track) can be in front of part of it, and behind another when the drop down is open.

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!!
Name: ‪Energy Skate Park‬
URL: https://phet-dev.colorado.edu/html/energy-skate-park/1.0.0-dev.6/phet/energy-skate-park_en_phet.html
Version: 1.0.0-dev.6 2020-01-27 21:28:50 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
Language: en-US
Window: 1536x722
Pixel Ratio: 2.5/1
WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 30 uniform: 4096
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[jessegreenberg]

Hmm, this is interesting, thanks. I agree this looks odd, but I think this is correct. The skater and other draggables are on top of most UI components (like the combo box button) because it would look strange if the skater got lost behind fixed buttons. But usually the ComboBox menu is on top of everything else when open. The menu is modal, it is only open when the user is actively using it. So it seems incorrect for the skater to be on top of it.

But I would love to hear @arouinfar thoughts on this.

[arouinfar]

I would agree @jessegreenberg. While it looks odd, it is indeed the correct behavior.

Here's a similar case in Masses and Springs: