diff --git a/frontend-js/src/main/js/gui/Legend.js b/frontend-js/src/main/js/gui/Legend.js
index 6d499e1bff47d38473661604875c670d87aa8afa..47d6c5465cdf497891d359d33f673f4a79f29248 100644
--- a/frontend-js/src/main/js/gui/Legend.js
+++ b/frontend-js/src/main/js/gui/Legend.js
@@ -1,12 +1,11 @@
 "use strict";
 
-/* exported logger */
-
 var AbstractGuiElement = require('./AbstractGuiElement');
 var ConfigurationType = require('../ConfigurationType');
 var Functions = require('../Functions');
 var PanelControlElementType = require('./PanelControlElementType');
 
+// noinspection JSUnusedLocalSymbols
 var logger = require('../logger');
 
 function Legend(params) {
@@ -24,14 +23,14 @@ Legend.prototype._initializeGui = function () {
   var legendDiv = Functions.createElement({
     type: "div",
     id: "legend-div",
-    className: "carousel slide",
+    className: "carousel slide"
   });
   self.getElement().appendChild(legendDiv);
 
   var indicators = Functions.createElement({
     type: "ol",
     name: "indicators",
-    className: "carousel-indicators",
+    className: "carousel-indicators"
   });
   legendDiv.appendChild(indicators);
   self.setControlElement(PanelControlElementType.LEGEND_INDICATORS_OL, indicators);
@@ -40,7 +39,7 @@ Legend.prototype._initializeGui = function () {
     type: "div",
     name: "slides",
     className: "carousel-inner",
-    role: "listbox",
+    role: "listbox"
   });
   legendDiv.appendChild(slidesDiv);
   self.setControlElement(PanelControlElementType.LEGEND_SLIDES_DIV, slidesDiv);
@@ -74,7 +73,15 @@ Legend.prototype.hide = function () {
   this.getElement().style.display = "none";
 };
 Legend.prototype.show = function () {
+  var maxZIndex = Math.max.apply(null,
+    $.map($('body *'), function (e, n) {
+      if ($(e).css('position') !== 'static') {
+        return parseInt($(e).css('z-index')) || 1;
+      }
+    }));
+
   this.getElement().style.display = "block";
+  $(this.getElement()).css('z-index', maxZIndex + 1);
 };
 
 function createLegendIndicator(file, index) {