Dialog and the top layer

Click to open a modal dialog
Click to open a z-index div

This is a demo of the top layer. Modal dialogs are in the top layer, a new stacking layer on top of the existing CSS layering stack. Here are some characteristics of the top layer.

Adding and removing
When dialog.showModal() is called, dialog is pushed to the top of the top layer stack. Calling dialog.close() removes it from the top layer.
z-index interaction
The top layer defeats any z-index. z-index doesn't affect elements in the top layer, just their position in the top layer stack does. However, the elements within the subtree of a top layer element be ordered amongst themselves using z-index.
Fullscreen API
The top layer is used by both <dialog> and the Fullscreen API (but the Fullscreen part is not yet implemented). This way there is no ambiguity of "always on top" behavior.
Windows plugins
The top layer is rendered above any plugins like Flash (not yet implemented).

Click the button in the lower left to open a modal dialog. Filler text follows to allow scrolling.