Stacking contexts for layers, overlays, and controls

src/ol/PluggableMap.js

@@ -19,7 +19,6 @@ import ViewHint from './ViewHint.js';
 import {assert} from './asserts.js';
 import {removeNode} from './dom.js';
 import {listen, unlistenByKey, unlisten} from './events.js';
-import {stopPropagation} from './events/Event.js';
 import EventType from './events/EventType.js';
 import {createEmpty, clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js';
 import {TRUE} from './functions.js';
@@ -260,6 +259,10 @@ class PluggableMap extends BaseObject {
      * @type {!HTMLElement}
      */
     this.overlayContainer_ = document.createElement('div');
+    this.overlayContainer_.style.position = 'absolute';
+    this.overlayContainer_.style.zIndex = '0';
+    this.overlayContainer_.style.width = '100%';
+    this.overlayContainer_.style.height = '100%';
     this.overlayContainer_.className = 'ol-overlaycontainer';
     this.viewport_.appendChild(this.overlayContainer_);
 
@@ -268,20 +271,11 @@ class PluggableMap extends BaseObject {
      * @type {!HTMLElement}
      */
     this.overlayContainerStopEvent_ = document.createElement('div');
+    this.overlayContainerStopEvent_.style.position = 'absolute';
+    this.overlayContainerStopEvent_.style.zIndex = '0';
+    this.overlayContainerStopEvent_.style.width = '100%';
+    this.overlayContainerStopEvent_.style.height = '100%';
     this.overlayContainerStopEvent_.className = 'ol-overlaycontainer-stopevent';
-    const overlayEvents = [
-      EventType.CLICK,
-      EventType.DBLCLICK,
-      EventType.MOUSEDOWN,
-      EventType.TOUCHSTART,
-      EventType.MSPOINTERDOWN,
-      MapBrowserEventType.POINTERDOWN,
-      EventType.MOUSEWHEEL,
-      EventType.WHEEL
-    ];
-    for (let i = 0, ii = overlayEvents.length; i < ii; ++i) {
-      listen(this.overlayContainerStopEvent_, overlayEvents[i], stopPropagation);
-    }
     this.viewport_.appendChild(this.overlayContainerStopEvent_);
 
     /**
@@ -917,6 +911,13 @@ class PluggableMap extends BaseObject {
       // coordinates so interactions cannot be used.
       return;
     }
+    let target = mapBrowserEvent.originalEvent.target;
+    while (target instanceof HTMLElement) {
+      if (target.parentElement === this.overlayContainerStopEvent_) {
+        return;
+      }
+      target = target.parentElement;
+    }
     this.focus_ = mapBrowserEvent.coordinate;
     mapBrowserEvent.frameState = this.frameState_;
     const interactionsArray = this.getInteractions().getArray();

src/ol/renderer/Composite.js

@@ -29,9 +29,9 @@ class CompositeMapRenderer extends MapRenderer {
      */
     this.element_ = document.createElement('div');
     const style = this.element_.style;
+    style.position = 'absolute';
     style.width = '100%';
     style.height = '100%';
-    style.position = 'relative';
     style.zIndex = '0';
 
     this.element_.className = CLASS_UNSELECTABLE + ' ol-layers';