Vuetify: Please use higher z-index values in general

[pscheit]

Dear Vuetify-Team,

I love it so far!

I'm using vuetify to create a photobook service which has a lot of layered components in its UI to display and modify images in containers. So I need to do a lot of absolute positioning and use a lot of z-index.
The problem is, hat some components - like the navigation toolbar, have such a low z-index (2) that I can't fit all my z-index layers (> 2) below the toolbar, but above others vuetify-components.
I cannot go into negative range (with my own layers), because I need to be on top of cards or other components.

TL;DR: If you would change your hardcoded z-index values from range: 1-10 to range 100 to 1000 (in 100er steps) it would really help a lot.

Would you consider this?

Best regards
Philipp

[johnleider]

Thank you for the suggestion. If you want to resubmit this a feature request we can get it tagged up.

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. Thank you.

[javiertury]

For anyone encountering this issue, let me remind you that z-index of a child element is always relative to the z-index of the parent element. You still can use the full z-index range, provided that you wrap the parent element correctly.

In my case, leaflet used a z-index range between 100 and 1100. What I did was to wrap the map as follows:

<map style="z-index: 0; height: 400px;" />

The elements inside the map component have z-indexes ranging between 100 and 1100. These values are used to organize the different leaflet layers and correctly display the map. Meanwhile when leaflet elements are compared against Vuetify elements, all of them have a z-index of 0.

In conclusion, vuetify can hardcode any z-index it wants. Any choice of hardcoded values is arbitrary. It's your responsibility to wrap your parent elements with the z-index that vuetify expects(usually z-index: 0).

Probably this should be documented somewhere.

[jimut]

@javiertury This will not work for elements that has position as fixed.

Instead if you set a z-index and position fixed on the v-dialog component. It will use that z-index as a reference to set the actual modal's z-index which will be 1 and 2 count above the one that you have set on the component.

For example, if you want the modal to be above 500. Write the template as:

<v-dialog style="position: fixed; z-index: 500;"></v-dialog>