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.

5 files changed, 6 insertions, 10 deletions

diff --git a/templates/web/base/maps/mapquest-attribution.html b/templates/web/base/maps/mapquest-attribution.html
index 8ca4ea650..60aa1b000 100644
--- a/templates/web/base/maps/mapquest-attribution.html
+++ b/templates/web/base/maps/mapquest-attribution.html
@@ -10,5 +10,5 @@
 
 [% map_html = BLOCK %]
 [% INCLUDE maps/openlayers.html %]
-<div class="olControlAttribution" style="position: absolute; z-index: 1005;">Data, imagery and map information provided by <a href="http://www.mapquest.com/">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" />, <a href="http://openstreetmap.org/">Open Street Map</a> and contributors, <a href="http://opendatacommons.org/licenses/odbl/">ODbL</a></div>
+<div class="olControlAttribution" style="position: absolute;">Data, imagery and map information provided by <a href="http://www.mapquest.com/">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" />, <a href="http://openstreetmap.org/">Open Street Map</a> and contributors, <a href="http://opendatacommons.org/licenses/odbl/">ODbL</a></div>
 [% END %]
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 7967d4480..d01e98138 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -65,7 +65,7 @@ var fixmystreet = {
     SET zoom_in  = '#' IF map.zoom >= map.numZoomLevels - 1;
     SET zoom_out = '#' IF map.zoom <= 0;
 %]
-<div style="position: absolute; left: 4px; top: 4px; z-index: 1007;" class="olControlPanZoom olControlNoSelect" unselectable="on">
+<div style="position: absolute; left: 4px; top: 4px;" class="olControlPanZoom olControlNoSelect" unselectable="on">
     <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a rel="nofollow" href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers-2.13.1/img/north-mini.png" border="0"></a></div>
     <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers-2.13.1/img/west-mini.png" border="0"></a></div>
     <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers-2.13.1/img/east-mini.png" border="0"></a></div>
diff --git a/templates/web/base/maps/osm.html b/templates/web/base/maps/osm.html
index ce08e179a..3e1e1aec8 100644
--- a/templates/web/base/maps/osm.html
+++ b/templates/web/base/maps/osm.html
@@ -10,5 +10,5 @@
 
 [% map_html = BLOCK %]
 [% INCLUDE maps/openlayers.html %]
-<div class="olControlAttribution" style="position: absolute; z-index: 1006;">&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div>
+<div class="olControlAttribution" style="position: absolute;">&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div>
 [% END %]
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;