Increase the z-index for the navigation

[Caleb-Ellis]

A couple of takeovers have been built that require z-indexes, and on two occasions these have gone above the navigation's z-index. We should just set it to 99, which is 1 below the global nav

[anthonydillon]

You taking this one @Greggless?

[nottrobin]

The global nav actually uses 4 different z-indexes:

1. 100: The global-nav container
2. 99: The nav header
3. 98: The nav drop-down
4. 97: The "overlay" underneath the drop-down

So we should choose a z-index below 97. However, I think this might be a problem we may run into in future, so maybe we should create some (loose or hard) standards around this. Basically, some ranges, like:

• 0-30: Core website content
• 31-60: Vanilla framework
• 61-100: Other plugins
• 101+: Reserved for the core website to overlay plugins if needed

Thoughts?

[nottrobin]

@Caleb-Ellis which takeovers were these? I can't find them grepping the codebase:

$ rg z-index
static/sass/_pattern_footer.scss:      z-index: 2;
static/sass/_pattern_notifications.scss:    z-index: 2;
static/sass/_pattern_gaming.scss:        z-index: 3000;
static/sass/_pattern_gaming.scss:      z-index: 2000;
static/sass/_pattern_desktop-statistics.scss:    z-index: 1;
static/js/global-nav.js: ... .global-nav{.. z-index:100} ...
static/sass/_pattern_navigation.scss:    z-index: 10;
static/sass/_pattern_navigation.scss:      z-index: 3;
static/sass/_pattern_navigation.scss:    z-index: 3;
static/sass/_pattern_navigation.scss:    z-index: 4;
static/sass/takeovers/_openstack-queens.scss:    z-index: 1;
static/sass/takeovers/_financial-services.scss:      z-index: 2;
static/sass/takeovers/_financial-services.scss:      z-index: 1;
static/sass/takeovers/_financial-services.scss:      z-index: 3;
templates/takeovers/_1810-takeover.html:    <div class="col-6" style="position: relative; z-index: 2;">
templates/openstack/shared/_openstack-pie-chart.html:    .style("z-index", "10")

The p-gaming ones were the only z-indexes higher than 97 (they should be fixed, but aren't urgent as the elements are way down the page). Is this because the takeovers were changed already?

[nottrobin]

It looks like this ticket isn't currently an issue, except for, possibly, p-gaming.

But that we need to find a way to avoid this happening in future.

I'm not sure "Increase the z-index for the navigation", the current title, is the right solution, since no matter how high the z-index for navigation is, someone could override it by using a higher one.

So I'm going to:

• Fix p-gaming
• File a PR on practices to define the ranges specified above

[Caleb-Ellis]

@nottrobin Yeah they've either been removed or updated already. I think they were both takeovers with overlaying animation (hence it becomes pretty easy to go above the nav's z-index of 3/4/10). Anyway I like the idea of some loose standards for z-index, but I think an immediate fix for this issue would be to increase the different nav z-indexes "a bit" so we've got some leeway with takeover animations

[nottrobin]

@Caleb-Ellis I don't understand that - are you saying you need more than 97 discrete z-index layers? My suggested ranges would provide you with 30 for in-site stuff, which also seems like more than enough. Am I wrong? What's an example of where you need so many z-index layers?

[nottrobin]

I ask because I suspect that a z-index of 100 was used in takeovers just because they picked a high number, not because they needed it. And I don't see a reason to do extra work to change global nav unless there is actually an argument for doing so.

[Caleb-Ellis]

@nottrobin Don't get me wrong I think the z-index ranges are a good idea, and I definitely don't think we need more than 97 layers. But the main problem with the current nav's z-index is that it is too low for overlaying animations on takeovers (or anywhere). For example, you have something in the background (2), something in the middle (3) and something over the top (4), and you're already over some parts of the nav.

I feel like I should be clear this issue is to do with the dropdown mega menu on ubuntu.com and not the global nav?

[anthonydillon]

I agree and the z-index ranges seems reasonable. How can we inform and reenforce this range across projects. Applications such as Juju has a Sass map to manage z-indexs.

[nottrobin]

Cool. Created PR, and created issue on practices: https://github.com/canonical-webteam/practices/issues/144.