z-index usage in astro

[Its-Just-Nans]

Hello

If I want to use z-index in a component inside my markdown, it's not working.

For example, if I want to use a component that can be in full screen, I will still see the sidebar and the top nav

The problem is that there is some CSS defitions that "disable" the z-index inside the main content

@layer starlight.base {
	:root,
	::backdrop {

      /* ...... */
              --sl-z-index-toc: 4;
              --sl-z-index-menu: 5;
              --sl-z-index-navbar: 10;
              --sl-z-index-skiplink: 20;
         }
}

in packages/starlight/style/props.css

Questions

• How could I disable that?

Suggestions

A possible solution would be to scope the css z-index with a default class - meaning "if a class is enabled, use the z-index".
This class would be on by default. Then we could easily disable it with classList function like .remove()

Or with a frontmatter property like
useZIndex: true => then put the default class
useZIndex: true => then DONT put the default class

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

[delucis]

We intentionally isolate the main content stacking context using isolation: isolate to prevent it ever displaying above the navgation bar, sidebar, etc:

starlight/packages/starlight/components/TwoColumnContent.astro

Lines 16 to 18 in 37d0af0

	.main-pane {
	isolation: isolate;
	}

This avoids that broken looking thing where some content suddenly scrolls above the site UI because of z-index values.

I think for something that can be full screen I would do one of the following:

• Use the actual Fullscreen API to request an element fills up the entire screen.
• Use a <dialog> element which pops up and covers the full screen. This would use the “top layer” and not be subject to z-index races.

If neither of those are possible, I guess you could also temporarily toggle on/off the isolation style when closing/opening your fullscreen element? But I’d be concerned that could still open things up for an arms race between who has the biggest z-index.

[Its-Just-Nans]

Thanks!

Both solution are nice, I think I will go with the Fullscreen API

Another question: could the isolate be a global variable ?

* {
   --main-frame-isolate: isolate;
}
 .main-pane { 
 	isolation: var(--main-frame-isolate); 
 }

?

[delucis]

Glad that’s working!

I don’t think the isolation mode really makes sense as a variable:

• it’s quite an “internal” detail and making it seem part of an official customization layer might be misleading as I’m pretty sure un-setting it would break stuff
• it’s only used in one place, so it’s not really much easier to change with a variable than it already is