← Blog

Why Your Fixed Footer Can Hide the Consent Banner on Small Screens (And How to Fix It in 2026)

The Hidden Overlap Problem

A fixed footer can completely cover your cookie consent banner on small screens, making it impossible for users to accept or reject tracking. This isn't just a UX annoyance — it's a GDPR and CCPA compliance risk that can trigger legal penalties and destroy conversion rates.

In 2026, with mobile commerce accounting for over 72% of all e-commerce transactions, ensuring your consent mechanisms remain visible and interactive is critical. The root cause lies in CSS z-index stacking contexts: when a fixed footer has a higher stacking order than your consent banner, it renders on top, creating an invisible barrier between the user and compliance.

Why This Happens

Modern mobile websites use position: fixed footers to keep contact information, CTAs, or navigation accessible. However, developers often assign these footers a high z-index value (e.g., z-index: 9999) to ensure they appear above other content. When consent banners are injected by third-party scripts with lower default z-index values, the footer wins the stacking battle every time.

How to Diagnose the Issue

Before fixing, you need to identify when and where the overlap occurs:

Manual Testing Steps

  1. Open your site on a real mobile device or emulator at 320px width
  2. Navigate to a page with a fixed footer
  3. Scroll to the bottom of the page
  4. Observe if the consent banner is partially or fully obscured
  5. Attempt to interact with banner buttons — can you click them?

CSS Solutions for Z-Index Conflicts

The fix requires careful management of z-index values and stacking contexts:

Method 1: Increase Consent Banner Priority

Set your consent banner's z-index higher than your footer:

.consent-banner { position: fixed; z-index: 10000; /* Higher than footer */ bottom: 0; left: 0; right: 0; }

This ensures the banner always appears above the footer regardless of the footer's z-index value.

Method 2: Create a Dedicated Consent Layer

For more robust control, create a dedicated overlay container:

.consent-overlay { position: fixed; z-index: 10001; bottom: 0; left: 0; width: 100%; pointer-events: none; } .consent-overlay > * { pointer-events: auto; }

This approach gives you complete control over interaction behavior while maintaining proper stacking order.

Preventing Future Conflicts

Don't wait for the next consent banner to break. Implement proactive measures:

Automated Detection with Playwright

Using Playwright-based audits, you can programmatically detect these overlaps:

await page.setViewportSize({ width: 320, height: 568 }); await page.goto('/your-page'); await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight)); const bannerBox = await page.locator('.consent-banner').boundingBox(); const footerBox = await page.locator('footer').boundingBox(); // Assert no vertical overlap expect(bannerBox.y + bannerBox.height).toBeLessThanOrEqual(footerBox.y);

NetSixtySix Mobile QA specializes in catching these subtle mobile layout issues through comprehensive Playwright-based audit suites that simulate real-world mobile conditions across hundreds of device configurations.

Quick Fix Checklist

IssueSolution Banner hidden behind footerIncrease banner z-index above footer Clipping by parent overflowRemove overflow: hidden from ancestors Footer covers banner buttonsAdd bottom padding to banner when footer is present Inconsistent across devicesUse media queries for responsive z-index adjustments

Real-World Impact

Consider a major airline that discovered their cookie consent banner was completely hidden on iPhone SE screens. Their legal team estimated potential GDPR fines of up to €20 million, while their analytics showed a 23% drop in consent acceptance rates — directly impacting their ability to personalize offers and reducing conversion rates by an estimated 8%. The fix took less than 15 minutes but saved them millions in potential penalties and lost revenue.

Mobile-First Considerations

In 2026's mobile-first indexing environment, Google evaluates consent banner visibility as part of Core Web Vitals. An obscured consent mechanism can trigger CLS (Cumulative Layout Shift) issues and hurt search rankings. Always test:

Conclusion

A fixed footer covering your consent banner isn't just a visual glitch — it's a compliance vulnerability that can cost your business significantly. By understanding CSS stacking contexts, implementing proper z-index hierarchies, and using automated testing tools like those from NetSixtySix Mobile QA, you can ensure your consent mechanisms remain visible and functional across all mobile devices. The investment in proper mobile QA pays dividends in both legal compliance and conversion optimization.

Related resources

Keep testing your pages with these NetSixtySix resources:

FAQ

How can I tell if my consent banner is being covered by a fixed footer?

Scroll to the bottom of any page with a fixed footer on a 320px viewport. If the consent banner appears behind or under the footer, or if you cannot click its buttons, it's being obscured. Use browser dev tools to inspect z-index values — the element with the higher value will appear on top.

What z-index value should I use for my consent banner?

Use a z-index value higher than your footer's maximum (typically 9999 or above). For better maintainability, establish a z-index scale: 10000+ for consent banners, 9999 for footers, 9000 for sticky headers. Using CSS custom properties like --z-consent-banner makes future updates easier.

Does this issue affect GDPR compliance?

Yes, significantly. If users cannot see or interact with your consent banner due to footer overlap, you cannot obtain valid consent for data processing. This violates GDPR Article 7 and can result in fines up to €20 million or 4% of annual turnover. The same applies to CCPA requirements for opt-out mechanisms.

Why Your Fixed Footer Can Hide the Consent Banner on Small Screens (And How to Fix It in 2026) | NetSixtySix Mobile QA