Sidebar doesn't respect z-index

[sawelch-NIVA]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

When a document includes a sidebar and a full screen element that overlaps it, sidebar elements with be rendered over the full screen element, even when its z-index is manually set high. I've tried playing with the CSS a bit, but couldn't find a workaround.

Screenshot of reprex:

Steps to reproduce

---
title: "Leaflet Sidebar Issue Reprex"
format: 
  html:
    grid: 
      body-width: 1500px
      sidebar-width: 300px
    toc: true
    page-layout: full
---
```{r}
#| warning: false
library(leaflet)
library(bslib)

# Create a simple leaflet map
map <- leaflet() |>
  addProviderTiles(providers$CartoDB.Positron) |>
  addCircleMarkers(
    lng = c(10.7522, 5.7339),
    lat = c(59.9139, 58.9700),
    popup = c("Oslo", "Stavanger"),
    radius = 10,
    fillOpacity = 0.7
  )

# Wrap in bslib card with full_screen option
bslib::card(
  full_screen = TRUE, 
  map, 
  style = "text-align: left; z-index: 999999;"
)
```

# Section 

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 

# Section 

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 

# Section 

# Section 

# Section 

# Section 

# Section 

Actual behavior

TOC renders over full screen element.

Expected behavior

Full screen element renders over TOC/Sidebar.

Your environment

• IDE: Positron 2025.12.1 (user setup) build 4
• OS: Windows 11

Quarto check output

PS C:\Users\SAW\Local Documents\EXPECT AEP\EXPECT_AEP_R_Project> quarto check
Quarto 1.8.26
[>] Checking environment information...
Quarto cache location: C:\Users\SAW\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.3.1: OK
Typst version 0.13.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.8.26
Path: C:\Users\SAW\AppData\Local\Programs\Quarto\bin
CodePage: 1252

[>] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)

[>] Checking LaTeX....................OK
Tex: (not detected)

[>] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: C:\Program Files\Google\Chrome\Application\chrome.exe
Source: Windows Registry

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
Version: 3.12.10
Path: C:/Python312/python.exe
Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with python -m pip install jupyter

[>] Checking R installation...........OK
Version: 4.5.2
Path: C:/PROGRA1/R/R-451.2
LibPaths:
- C:/Users/SAW/AppData/Local/R/win-library/4.5
- C:/Program Files/R/R-4.5.2/library
knitr: 1.50
rmarkdown: 2.30

[>] Checking Knitr engine render......OK

[mcanouil]

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[mcanouil]

Workaround: You can change the sidebar/margin z-index.

include-in-header:
  - text: |
      <style>
      /* "Hide" TOC sidebar when card is in full-screen mode */
      .bslib-card[data-full-screen="true"] ~ #quarto-margin-sidebar,
      body:has(.bslib-card[data-full-screen="true"]) #quarto-margin-sidebar {
        z-index: 0 !important;
      }
      </style>

In the future, try to make your example smaller/simpler.
Leaflet is a big dependency that requires several system libraries.

---
title: "Sidebar Issue Reprex"
format: 
  html:
    grid: 
      body-width: 1500px
      sidebar-width: 300px
    toc: true
    page-layout: full
---

```{r}
#| warning: false
library(bslib)
bslib::card(
  full_screen = TRUE,
  "text",
  style = "text-align: left; z-index: 999999;"
)
```

# Section 

{{< lipsum 1 >}}

# Section 

{{< lipsum 1 >}}

# Section 

[mcanouil]

As this this really specific to bslib components, I'm not sure there is something to do on Quarto side.