diff --git a/src/ol/Overlay.js b/src/ol/Overlay.js
index 0bde6ec3b7..62b8d4d342 100644
--- a/src/ol/Overlay.js
+++ b/src/ol/Overlay.js
@@ -145,6 +145,7 @@ class Overlay extends BaseObject {
         ? options.className
         : 'ol-overlay-container ' + CLASS_SELECTABLE;
     this.element.style.position = 'absolute';
+    this.element.style.pointerEvents = 'auto';
 
     let autoPan = options.autoPan;
     if (autoPan && 'object' !== typeof autoPan) {
diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js
index bb9b8868bd..6f9546af23 100644
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -261,6 +261,7 @@ class PluggableMap extends BaseObject {
     this.overlayContainer_.style.zIndex = '0';
     this.overlayContainer_.style.width = '100%';
     this.overlayContainer_.style.height = '100%';
+    this.overlayContainer_.style.pointerEvents = 'none';
     this.overlayContainer_.className = 'ol-overlaycontainer';
     this.viewport_.appendChild(this.overlayContainer_);
 
@@ -273,6 +274,7 @@ class PluggableMap extends BaseObject {
     this.overlayContainerStopEvent_.style.zIndex = '0';
     this.overlayContainerStopEvent_.style.width = '100%';
     this.overlayContainerStopEvent_.style.height = '100%';
+    this.overlayContainerStopEvent_.style.pointerEvents = 'none';
     this.overlayContainerStopEvent_.className = 'ol-overlaycontainer-stopevent';
     this.viewport_.appendChild(this.overlayContainerStopEvent_);
 
diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js
index bffe3376ba..09071ad492 100644
--- a/src/ol/control/Attribution.js
+++ b/src/ol/control/Attribution.js
@@ -48,10 +48,10 @@ class Attribution extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private
diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js
index d9626816f2..012749b53d 100644
--- a/src/ol/control/Control.js
+++ b/src/ol/control/Control.js
@@ -83,6 +83,17 @@ class Control extends BaseObject {
     }
   }
 
+  /**
+   * Creates the element for this control and sets it on the instance.
+   * @return {HTMLDivElement} Element for this control.
+   */
+  createElement() {
+    const element = document.createElement('div');
+    element.style.pointerEvents = 'auto';
+    this.element = element;
+    return element;
+  }
+
   /**
    * Clean up.
    */
diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js
index 44022755c4..792372e84b 100644
--- a/src/ol/control/FullScreen.js
+++ b/src/ol/control/FullScreen.js
@@ -72,9 +72,9 @@ class FullScreen extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private
diff --git a/src/ol/control/MousePosition.js b/src/ol/control/MousePosition.js
index 3a335e0816..afc1ddaf09 100644
--- a/src/ol/control/MousePosition.js
+++ b/src/ol/control/MousePosition.js
@@ -60,16 +60,15 @@ class MousePosition extends Control {
   constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
-    const element = document.createElement('div');
-    element.className =
-      options.className !== undefined ? options.className : 'ol-mouse-position';
-
     super({
-      element: element,
       render: options.render,
       target: options.target,
     });
 
+    const element = this.createElement();
+    element.className =
+      options.className !== undefined ? options.className : 'ol-mouse-position';
+
     this.addEventListener(
       getChangeEventType(PROJECTION),
       this.handleProjectionChanged_
diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js
index 08cadf7949..9ee6095c7c 100644
--- a/src/ol/control/OverviewMap.js
+++ b/src/ol/control/OverviewMap.js
@@ -80,10 +80,10 @@ class OverviewMap extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private
diff --git a/src/ol/control/Rotate.js b/src/ol/control/Rotate.js
index aac954fcb7..acb97438ea 100644
--- a/src/ol/control/Rotate.js
+++ b/src/ol/control/Rotate.js
@@ -38,10 +38,10 @@ class Rotate extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     const className =
       options.className !== undefined ? options.className : 'ol-rotate';
diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js
index 12ba3be29d..47a18e20e6 100644
--- a/src/ol/control/ScaleLine.js
+++ b/src/ol/control/ScaleLine.js
@@ -86,10 +86,10 @@ class ScaleLine extends Control {
         : 'ol-scale-line';
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private
diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js
index b2ac5dae04..292c9805ae 100644
--- a/src/ol/control/Zoom.js
+++ b/src/ol/control/Zoom.js
@@ -37,9 +37,9 @@ class Zoom extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       target: options.target,
     });
+    this.createElement();
 
     const className =
       options.className !== undefined ? options.className : 'ol-zoom';
diff --git a/src/ol/control/ZoomSlider.js b/src/ol/control/ZoomSlider.js
index 7e95458b2c..7588910dc9 100644
--- a/src/ol/control/ZoomSlider.js
+++ b/src/ol/control/ZoomSlider.js
@@ -48,9 +48,9 @@ class ZoomSlider extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
     });
+    this.createElement();
 
     /**
      * @type {!Array.<import("../events.js").EventsKey>}
diff --git a/src/ol/control/ZoomToExtent.js b/src/ol/control/ZoomToExtent.js
index 68ddcc3c88..cf94859fb8 100644
--- a/src/ol/control/ZoomToExtent.js
+++ b/src/ol/control/ZoomToExtent.js
@@ -33,9 +33,9 @@ class ZoomToExtent extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @type {?import("../extent.js").Extent}
diff --git a/src/ol/ol.css b/src/ol/ol.css
index 8ba9b1d313..36845ba789 100644
--- a/src/ol/ol.css
+++ b/src/ol/ol.css
@@ -74,12 +74,6 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
-.ol-overlaycontainer, .ol-overlaycontainer-stopevent {
-  pointer-events: none;
-}
-.ol-overlaycontainer > *, .ol-overlaycontainer-stopevent > * {
-  pointer-events: auto;
-}
 .ol-selectable {
   -webkit-touch-callout: default;
   -webkit-user-select: text;
@@ -150,9 +144,6 @@
   border: none;
   padding: 0;
 }
-.ol-control button span {
-  pointer-events: none;
-}
 .ol-zoom-extent button {
   line-height: 1.4em;
 }
diff --git a/src/ol/render/Box.js b/src/ol/render/Box.js
index d5b6e46852..4b09e98033 100644
--- a/src/ol/render/Box.js
+++ b/src/ol/render/Box.js
@@ -24,6 +24,7 @@ class RenderBox extends Disposable {
      */
     this.element_ = document.createElement('div');
     this.element_.style.position = 'absolute';
+    this.element_.style.pointerEvents = 'auto';
     this.element_.className = 'ol-box ' + className;
 
     /**