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')({