From feb3355514be568806ff8a38ae4e6a34376e46da Mon Sep 17 00:00:00 2001
From: Steve Sims <steve_sims7@yahoo.co.uk>
Date: Wed, 7 Nov 2018 12:23:26 +0000
Subject: [PATCH] Ensure PageHeader will sit above other items (#110)

Fixes an issue whereby focus rings on PageNavigation items would sit on
top of the header, which looked ugly
---
 components/page-header/src/__snapshots__/test.js.snap | 2 ++
 components/page-header/src/index.js                   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/components/page-header/src/__snapshots__/test.js.snap b/components/page-header/src/__snapshots__/test.js.snap
index b6c7c0f..5a833e6 100644
--- a/components/page-header/src/__snapshots__/test.js.snap
+++ b/components/page-header/src/__snapshots__/test.js.snap
@@ -2,9 +2,11 @@
 
 exports[`PageHeaderExample renders the storybook example 1`] = `
 .emotion-30 {
+  position: relative;
   width: 100%;
   color: #ffffff;
   background: #0b0c0c;
+  z-index: 100;
 }
 
 .emotion-28 {
diff --git a/components/page-header/src/index.js b/components/page-header/src/index.js
index 152e63f..71d9c5b 100644
--- a/components/page-header/src/index.js
+++ b/components/page-header/src/index.js
@@ -9,9 +9,11 @@ import LogoAnchor from './atoms/logo-anchor';
 import NavAnchor from './atoms/nav-anchor';
 
 const StyledPageHeader = styled('header')({
+  position: 'relative',
   width: '100%',
   color: WHITE,
   background: BLACK,
+  zIndex: 100,
 });
 
 const InnerContainer = styled('div')({