Repository: vscode
Issue: Consolidate zindex for floating elements in the workbench
Labels: debt,layout

Currently in the workbench, we have quite a lot of custom floating elements, e.g., context menu, hover, suggest, which are not native OS controls. To ensure they are above other DOM elements, we usually update `z-index` but since the workbench grid view is flat, most `z-index` we use now are universal (not limited to its own container) and we kept seeing floating elements overlap each other in funny ways (for example, suggest widget overlaps with sash, context menu, toolbar, etc).

We can probably introduce some const enums for zindex, which can be used as a guidance for updating zindex in your own component:

```ts
const enum ZINDEX {
  Sash = 35,
  SuggestWidget = 40,
  QuickInput= 1000,
  ContextView = 2500,
  ModalDialog = 2600
  ...
}
```

The list will be short and give us an idea of what range of `z-index` is safe to use in one particular component.

---

*Current status*

- 35
  - Sash
  - Find Widget  https://github.com/microsoft/vscode/blob/a8b8e7bd483aeb886e087fd57a0fb6edf23096f9/src/vs/editor/contrib/find/findWidget.css#L9
- 39
  - debug toolbar https://github.com/microsoft/vscode/blob/75c0562a26ee96fa03a235dec785333219a2d028/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css#L8
- 40
  - Suggest Widget https://github.com/microsoft/vscode/blob/3172af8aef96276479bdab0a8bca6ef5c1806fda/src/vs/editor/contrib/rename/renameInputField.css#L7
- 50
  - Hover  https://github.com/microsoft/vscode/blob/ef55a57968e30be8cbe82a2844277550d5c79da4/src/vs/base/browser/ui/hover/hover.css#L10
- 100
  - Rename input https://github.com/microsoft/vscode/blob/3172af8aef96276479bdab0a8bca6ef5c1806fda/src/vs/editor/contrib/rename/renameInputField.css#L7
- 1000
  - `monaco-drag-image` https://github.com/microsoft/vscode/blob/97a719dd9b6f56ae724df1beb79944596d998eb6/src/vs/base/browser/ui/list/list.css#L65
  - `notifications-center`  https://github.com/microsoft/vscode/blob/84043ab3b8f1aa6c60baeecffda3947366b3d888/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css#L8
- 2000
  - `menubar-menu-items-holder` https://github.com/microsoft/vscode/blob/e62bf133c4562fead1e0a128294066a73a5661b8/src/vs/base/browser/ui/menu/menubar.css#L48
  - `quick-input-widget` https://github.com/microsoft/vscode/blob/73274265d7e59b458d70b182d52dccf25d565749/src/vs/base/parts/quickinput/browser/media/quickInput.css#L9
- 2500
  - `context-view` https://github.com/microsoft/vscode/blob/01b37c6b5d991f959f0b31a58055fecf6bc52729/src/vs/base/browser/ui/contextview/contextview.css#L8
  - `titlebar`  https://github.com/microsoft/vscode/blob/84043ab3b8f1aa6c60baeecffda3947366b3d888/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css#L8
- 2600
  - `monaco-dialog-modal-block` https://github.com/microsoft/vscode/blob/0d0026e42f74553b3cd7eb8419a9bdaaa7e5573d/src/vs/base/browser/ui/dialog/dialog.css#L13
- 3000
  - `window-controls-container` https://github.com/microsoft/vscode/blob/67c889e39416c958fc7cb84e4814df2225c22852/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css#L128
- 9999
  - welcome overlay https://github.com/microsoft/vscode/blob/a5ee0a3449442e2f05074b38d935d4e361d6b963/src/vs/workbench/contrib/welcome/overlay/browser/welcomeOverlay.css#L12
- 10000
  - `monaco-pane-drop-overlay` https://github.com/microsoft/vscode/blob/7c3f60f86e6776c4a339c23f85fd9a11c3424bbb/src/vs/base/browser/ui/splitview/paneview.css#L123
  - `monaco-editor-overlaymessage` https://github.com/microsoft/vscode/blob/55fdf94d67dfc72eaaf25655b7b0d9ff16d2e301/src/vs/editor/contrib/message/messageController.css#L6
- 100000
  - screen cast