Fix footer z-index stacking issue #18

New Issue

2026-06-30T14:34:28-07:00

amari commented

2026-06-30 14:34:28 -07:00

Description

Our footer is experiencing an intermittent stacking order problem where the page body occasionally renders on top of the footer instead of behind it. This happens randomly on page refresh, which suggests a CSS z-index collision or missing layering context.

This feels like a race condition in how the DOM is being painted, and it's definitely creating a confusing user experience when it happens.

What's happening

Refreshing the page has roughly a 50% chance of displaying the body content on top of the footer
The footer should always sit behind the main content
This appears to be z-index related rather than a layout flow issue

Acceptance Criteria

✨ Footer has an explicit, appropriate z-index value set
✨ Body/main content area has a z-index that ensures it layers correctly above the footer
✨ Multiple page refreshes (10+) show consistent stacking order every time
✨ No unintended side effects on other layered elements (modals, dropdowns, etc.)

Notes for the team

This might be worth checking if there's a z-index war happening elsewhere on the page, or if the footer needs a stacking context established. The randomness on refresh is the real clue here — let's make sure our layering is bulletproof. 💙

## Description Our footer is experiencing an intermittent stacking order problem where the page body occasionally renders on top of the footer instead of behind it. This happens randomly on page refresh, which suggests a CSS z-index collision or missing layering context. This feels like a race condition in how the DOM is being painted, and it's definitely creating a confusing user experience when it happens. ## What's happening - Refreshing the page has roughly a 50% chance of displaying the body content on top of the footer - The footer should *always* sit behind the main content - This appears to be z-index related rather than a layout flow issue ## Acceptance Criteria - ✨ Footer has an explicit, appropriate z-index value set - ✨ Body/main content area has a z-index that ensures it layers correctly above the footer - ✨ Multiple page refreshes (10+) show consistent stacking order every time - ✨ No unintended side effects on other layered elements (modals, dropdowns, etc.) ## Notes for the team This might be worth checking if there's a z-index war happening elsewhere on the page, or if the footer needs a stacking context established. The randomness on refresh is the real clue here — let's make sure our layering is bulletproof. 💙

nerdychara commented

2026-07-09 10:49:19 -07:00

I'm a little confused about this issue. The footer element with a class of page-footer has a z-index of 1000 set in the theme-witch.css file. Thus causing it to render above the page body. The wording of the issue is confusing me on what the appropriate behavior should be.

I'm a little confused about this issue. The `footer` element with a class of `page-footer` has a `z-index` of `1000` set in the `theme-witch.css` file. Thus causing it to render above the page body. The wording of the issue is confusing me on what the appropriate behavior should be.

nerdychara closed this issue

2026-07-09 10:49:19 -07:00

nerdychara reopened this issue

2026-07-09 10:49:28 -07:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: nhcarrigan/website-headers#18