diff --git a/src/ol/layer/Base.js b/src/ol/layer/Base.js
index 801aad532f..9fe5e037c9 100644
--- a/src/ol/layer/Base.js
+++ b/src/ol/layer/Base.js
@@ -111,8 +111,7 @@ class BaseLayer extends BaseObject {
     state.sourceState = this.getSourceState();
     state.visible = this.getVisible();
     state.extent = this.getExtent();
-    state.zIndex =
-      zIndex !== undefined ? zIndex : state.managed === false ? Infinity : 0;
+    state.zIndex = zIndex === undefined && !state.managed ? Infinity : zIndex;
     state.maxResolution = this.getMaxResolution();
     state.minResolution = Math.max(this.getMinResolution(), 0);
     state.minZoom = this.getMinZoom();
diff --git a/src/ol/layer/Group.js b/src/ol/layer/Group.js
index f08e7290bb..7bc6a2b13d 100644
--- a/src/ol/layer/Group.js
+++ b/src/ol/layer/Group.js
@@ -205,12 +205,16 @@ class LayerGroup extends BaseLayer {
   }
 
   /**
-   * @param {Array<import("./Layer.js").State>} [opt_states] Optional list of layer states (to be modified in place).
+   * Get the layer states list and use this groups z-index as the default
+   * for all layers in this and nested groups, if it is unset at this point.
+   * If opt_states is not provided and this group's z-index is undefined
+   * 0 is used a the default z-index.
+   * @param {Array<import("./Layer.js").State>} [opt_states] Optional list
+   * of layer states (to be modified in place).
    * @return {Array<import("./Layer.js").State>} List of layer states.
    */
   getLayerStatesArray(opt_states) {
     const states = opt_states !== undefined ? opt_states : [];
-
     const pos = states.length;
 
     this.getLayers().forEach(function (layer) {
@@ -218,6 +222,10 @@ class LayerGroup extends BaseLayer {
     });
 
     const ownLayerState = this.getLayerState();
+    let defaultZIndex = ownLayerState.zIndex;
+    if (!opt_states && ownLayerState.zIndex === undefined) {
+      defaultZIndex = 0;
+    }
     for (let i = pos, ii = states.length; i < ii; i++) {
       const layerState = states[i];
       layerState.opacity *= ownLayerState.opacity;
@@ -242,6 +250,9 @@ class LayerGroup extends BaseLayer {
           layerState.extent = ownLayerState.extent;
         }
       }
+      if (layerState.zIndex === undefined) {
+        layerState.zIndex = defaultZIndex;
+      }
     }
 
     return states;
diff --git a/test/browser/spec/ol/layer/group.test.js b/test/browser/spec/ol/layer/group.test.js
index 91bc36b305..a60788fb5c 100644
--- a/test/browser/spec/ol/layer/group.test.js
+++ b/test/browser/spec/ol/layer/group.test.js
@@ -46,7 +46,7 @@ describe('ol.layer.Group', function () {
         managed: true,
         sourceState: 'ready',
         extent: undefined,
-        zIndex: 0,
+        zIndex: undefined,
         maxResolution: Infinity,
         minResolution: 0,
         minZoom: -Infinity,
@@ -205,7 +205,7 @@ describe('ol.layer.Group', function () {
         managed: true,
         sourceState: 'ready',
         extent: groupExtent,
-        zIndex: 0,
+        zIndex: undefined,
         maxResolution: 500,
         minResolution: 0.25,
         minZoom: -Infinity,
@@ -265,7 +265,7 @@ describe('ol.layer.Group', function () {
         managed: true,
         sourceState: 'ready',
         extent: undefined,
-        zIndex: 0,
+        zIndex: undefined,
         maxResolution: Infinity,
         minResolution: 0,
         minZoom: -Infinity,
@@ -281,7 +281,7 @@ describe('ol.layer.Group', function () {
         managed: true,
         sourceState: 'ready',
         extent: undefined,
-        zIndex: 0,
+        zIndex: undefined,
         maxResolution: Infinity,
         minResolution: 0,
         minZoom: -Infinity,
@@ -427,7 +427,7 @@ describe('ol.layer.Group', function () {
         minResolution: 0.2,
       });
 
-      const layerStatesArray = group.getLayerStatesArray();
+      const layerStatesArray = group.getLayerStatesArray([]);
 
       // compare layer state to group state
 
@@ -447,7 +447,7 @@ describe('ol.layer.Group', function () {
         managed: true,
         sourceState: 'ready',
         extent: undefined,
-        zIndex: 0,
+        zIndex: undefined,
         maxResolution: 150,
         minResolution: 0.25,
         minZoom: -Infinity,
@@ -477,6 +477,8 @@ describe('ol.layer.Group', function () {
 
       expect(group.getLayerStatesArray()[0].minZoom).to.be(5);
       expect(group.getLayerStatesArray()[1].minZoom).to.be(10);
+
+      disposeHierarchy(group);
     });
 
     it('returns min maxZoom of layers', function () {
@@ -499,6 +501,74 @@ describe('ol.layer.Group', function () {
 
       expect(group.getLayerStatesArray()[0].maxZoom).to.be(5);
       expect(group.getLayerStatesArray()[1].maxZoom).to.be(2);
+
+      disposeHierarchy(group);
+    });
+
+    it('uses the layer group zIndex if layer has no zIndex', function () {
+      const layerM1 = new Layer({
+        zIndex: -1,
+        source: new Source({}),
+      });
+      const layerUndefined = new Layer({
+        source: new Source({}),
+      });
+      const layer0 = new Layer({
+        zIndex: 0,
+        source: new Source({}),
+      });
+      const group = new LayerGroup({
+        zIndex: 2,
+        layers: [layerM1, layerUndefined, layer0],
+      });
+
+      const layerStatesArray = group.getLayerStatesArray();
+      expect(layerStatesArray[0].zIndex).to.be(-1);
+      expect(layerStatesArray[1].zIndex).to.be(2);
+      expect(layerStatesArray[2].zIndex).to.be(0);
+
+      disposeHierarchy(group);
+    });
+
+    it('uses the deepest nested group with zIndex as default', function () {
+      const group = new LayerGroup({
+        zIndex: 1,
+        layers: [
+          new LayerGroup({
+            zIndex: 5,
+            layers: [
+              new Layer({
+                source: new Source({}),
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const layerStatesArray = group.getLayerStatesArray();
+      expect(layerStatesArray[0].zIndex).to.be(5);
+
+      disposeHierarchy(group);
+    });
+
+    it('uses zIndex of closest parent group where it is not undefined', function () {
+      const group = new LayerGroup({
+        zIndex: 1,
+        layers: [
+          new LayerGroup({
+            layers: [
+              new Layer({
+                source: new Source({}),
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const layerStatesArray = group.getLayerStatesArray();
+      expect(layerStatesArray[0].zIndex).to.be(1);
+
+      disposeHierarchy(group);
     });
   });
 });
diff --git a/test/browser/spec/ol/layer/layer.test.js b/test/browser/spec/ol/layer/layer.test.js
index af46d03979..2a844dd8a5 100644
--- a/test/browser/spec/ol/layer/layer.test.js
+++ b/test/browser/spec/ol/layer/layer.test.js
@@ -56,7 +56,7 @@ describe('ol.layer.Layer', function () {
         managed: true,
         sourceState: 'ready',
         extent: undefined,
-        zIndex: 0,
+        zIndex: undefined,
         maxResolution: Infinity,
         minResolution: 0,
         minZoom: -Infinity,