Simplify z-index of banners.

Constrain the map in a position:relative to give it its own stacking
context. This simplifies these z-indices and prevents the elements from
floating above the main header. Fixes #673.

2 files changed, 3 insertions, 7 deletions

diff --git a/web/cobrands/makemyisland/base.scss b/web/cobrands/makemyisland/base.scss
index b78638e00..234a9783f 100644
--- a/web/cobrands/makemyisland/base.scss
+++ b/web/cobrands/makemyisland/base.scss
@@ -6,7 +6,6 @@
 @import "../sass/base";
 
 #site-logo {
-    z-index: 1000;
     background: url(/cobrands/makemyisland/make-my-island-logo.gif) 0px 0px no-repeat;
     background-size: contain;
     background-color: $blue;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 0faafd20d..4e3dea444 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -753,7 +753,6 @@ a:hover.button-left {
 
 .big-green-banner {
   position: relative;
-  z-index:1000;
   top:-1.75em;
   background: $col_click_map;
   color: #fff;
@@ -777,7 +776,6 @@ a:hover.button-left {
 
 .banner {
   position: relative;
-  z-index:1100;
   p {
     position: absolute;
     top:-1.95em;
@@ -1002,8 +1000,9 @@ a:hover.button-left {
   overflow: hidden;
   position: relative;
   #map {
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
+    position: relative;
   }
 }
 
@@ -1087,7 +1086,6 @@ a:hover.button-left {
   left: 0;
   right:0;
   bottom: 0;
-  z-index: 1100;
   background:#333;
   background:rgba(0, 0, 0, 0.7);
   margin:0;
@@ -1137,7 +1135,6 @@ a:hover.button-left {
 
 #mob_sub_map_links {
   position: absolute;
-  z-index:1100;
   bottom:0;
   display:table;
   margin:0;