From 9441dd0b375ecb26dd42949a14fb41dad5a1bebb Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Oct 2019 12:03:14 +0100
Subject: [PATCH] Make `<main>` section `position: relative`

The content of the GOV.UK Frontend header
component is `position: relative`. This changed
the [default z-index
stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index_
so it was above `<main>`.

This aligns `<main>` with the header, meaning
`<main>` appears above it due to being below it in
the document.
---
 app/assets/stylesheets/govuk-frontend/overrides.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/govuk-frontend/overrides.scss b/app/assets/stylesheets/govuk-frontend/overrides.scss
index aef057799..fa6a83756 100644
--- a/app/assets/stylesheets/govuk-frontend/overrides.scss
+++ b/app/assets/stylesheets/govuk-frontend/overrides.scss
@@ -10,3 +10,11 @@
   }
 
 }
+
+// The GOV.UK Frontend header component wraps content that is `position: relative`
+// This changes its z-index position, putting it above the `<main>` section
+// We need the `<main>` section to be above it, like the default order, to hide the theme colour
+// bar on full-width pages
+.govuk-main-wrapper {
+  position: relative;
+}