playcanvas / pcui

UI component library for web-based tools
http://playcanvas.github.io/pcui
MIT License
663 stars 62 forks source link

A default `Overlay` has the clickable div in front of the contents #234

Open willeastcott opened 1 year ago

willeastcott commented 1 year ago

Describe the bug If you create a default Overlay and append some other elements, those elements will appear behind the transparent clickable div that darkens everything and makes the content elements impossible to interact with.

To Reproduce Steps to reproduce the behavior:

  1. Locate the Overlay example and remove the style:
        .pcui-overlay-content {
            z-index: 0;
        }
  1. Run the example
  2. See the problem

Expected behavior The overlay's content should appear in front of the full-tab clickable UI.

Screenshots image

How it should look:

image

A default overlay should not require the setting of a custom z-index for it to work.

willeastcott commented 1 year ago

One thing I notice is that the z-index of the overlay element is hard-coded to 101:

https://github.com/playcanvas/pcui/blob/af103365533c30dec9f8d1e27fbf627429a7ff10/src/components/Overlay/style.scss#L8

This seems a little arbitrary. What is the strategy for complex applications to manage z-index? From scanning the source, we have: