Return main content area to position: static

Was set to `position: relative` to solve an issue
on the produce page. This introduced other issues
with the sticky JS and the fix is only needed for
the product page so this moves it to that CSS.

The previous fix was applied here:

9441dd0b37

app/assets/stylesheets/govuk-frontend/overrides.scss

@@ -11,14 +11,6 @@
 
 }
 
-// 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;
-}
-
 // Additional padding-bottom override, following the GOV.UK Frontend spacing scale:
 // https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale
 .govuk-\!-padding-bottom-12 {

app/assets/stylesheets/views/product-page.scss

@@ -2,6 +2,11 @@
 
   &-intro {
 
+    // The GOV.UK Frontend header component wraps content that is `position: relative`
+    // This changes its z-index position, putting it above the `<main>` section in the stacking order
+    // We need the `<main>` section to be above it, like the default order, so when we apply the
+    // negative margin-top it overlaps the theme bar at the bottom of the header
+    position: relative;
     margin: -10px 0 $gutter * 1.5 0;
     padding: 0 0 $gutter * 2 0;
     background: $govuk-blue;