diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js
index 626b1bf6201..89a68bf8d73 100644
--- a/addons/web_editor/static/src/js/common/grid_layout_utils.js
+++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js
@@ -147,7 +147,7 @@ export function _toggleGridMode(containerEl) {
 function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) {
     let maxRowEnd = 0;
     const columnSpans = [];
-    const columnCount = columnEls.length; // number of column in the grid.
+    let zIndex = 1;
     const imageColumns = []; // array of boolean telling if it is a column with only an image.
 
     // Checking if all the columns have a background color to take that into
@@ -199,8 +199,8 @@ function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) {
         columnEl.classList.remove(...toRemove);
         columnEl.classList.add('g-col-lg-' + columnSpan, 'g-height-' + rowSpan);
 
-        // Setting the initial z-index to the number of columns.
-        columnEl.style.zIndex = columnCount;
+        // Setting the initial z-index.
+        columnEl.style.zIndex = zIndex++;
 
         // Reload the images.
         _reloadLazyImages(columnEl);
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 1e97e19f27d..029dcab5182 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1028,6 +1028,8 @@ var SnippetEditor = Widget.extend({
                 this.dragState.startingGrid = rowEl;
                 this.dragState.prevGridArea = self.$target[0].style.gridArea;
 
+                this.dragState.startingZIndex = self.$target[0].style.zIndex;
+
                 // Reload the images.
                 gridUtils._reloadLazyImages(this.$target[0]);
             } else {
@@ -1172,11 +1174,16 @@ var SnippetEditor = Widget.extend({
                     const rowCount = Math.max(rowEl.dataset.rowCount, columnRowCount);
                     $dropzone[0].style.gridRowEnd = rowCount + 1;
 
-                    // Setting the background grid, the moving grid item and
-                    // the drag helper z-indexes so they are in front of the
-                    // other elements and in this order.
+                    // Setting the moving grid item, the background grid and
+                    // the drag helper z-indexes. The grid item z-index is set
+                    // to its original one if we are in its starting grid, or
+                    // to the maximum z-index of the grid otherwise.
+                    if (rowEl === self.dragState.startingGrid) {
+                        self.$target[0].style.zIndex = self.dragState.startingZIndex;
+                    } else {
+                        gridUtils._setElementToMaxZindex(self.$target[0], rowEl);
+                    }
                     gridUtils._setElementToMaxZindex(backgroundGridEl, rowEl);
-                    gridUtils._setElementToMaxZindex(self.$target[0], rowEl);
                     gridUtils._setElementToMaxZindex(dragHelperEl, rowEl);
 
                     // Setting the column height and width to keep its size
@@ -1283,9 +1290,6 @@ var SnippetEditor = Widget.extend({
             this.dragState.dragHelperEl.remove();
             this.dragState.backgroundGridEl.remove();
             gridUtils._resizeGrid(rowEl);
-
-            // Setting the z-index to the maximum of the grid.
-            gridUtils._setElementToMaxZindex(this.$target[0], rowEl);
         } else if (this.$target[0].classList.contains('o_grid_item') && this.dropped) {
             // Case when dropping a grid item in a non-grid dropzone.
             this.$target[0].classList.remove('o_grid_item');
@@ -1322,8 +1326,12 @@ var SnippetEditor = Widget.extend({
                     const rowCount = Math.max(rowEl.dataset.rowCount, 1 + this.dragState.columnRowCount);
                     rowEl.dataset.rowCount = rowCount;
 
-                    // Setting the z-index to the maximum of the grid.
-                    gridUtils._setElementToMaxZindex(this.$target[0], rowEl);
+                    // Setting the grid item z-index.
+                    if (rowEl === this.dragState.startingGrid) {
+                        this.$target[0].style.zIndex = this.dragState.startingZIndex;
+                    } else {
+                        gridUtils._setElementToMaxZindex(this.$target[0], rowEl);
+                    }
                 } else {
                     if (this.$target[0].classList.contains('o_grid_item')) {
                         // Case when a grid column is dropped near a non-grid
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index b88ad29fd7a..3e2a7d63dea 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -4272,7 +4272,6 @@ registry.sizing = SnippetOptionWidget.extend({
                 backgroundGridEl = gridUtils._addBackgroundGrid(rowEl, 0);
                 self.options.wysiwyg.odooEditor.observerActive('displayBackgroundGrid');
                 gridUtils._setElementToMaxZindex(backgroundGridEl, rowEl);
-                gridUtils._setElementToMaxZindex(self.$target[0], rowEl);
             }
 
             // For loop to handle the cases where it is ne, nw, se or sw. Since
@@ -4364,7 +4363,6 @@ registry.sizing = SnippetOptionWidget.extend({
                     backgroundGridEl.remove();
                     self.options.wysiwyg.odooEditor.observerActive('displayBackgroundGrid');
                     gridUtils._resizeGrid(rowEl);
-                    gridUtils._setElementToMaxZindex(self.$target[0], rowEl);
 
                     const colClass = [...self.$target[0].classList].find(c => /^col-/.test(c));
                     const gColClass = [...self.$target[0].classList].find(c => /^g-col-/.test(c));
diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml
index af009f01c37..930978b7350 100644
--- a/addons/website/views/snippets/s_masonry_block.xml
+++ b/addons/website/views/snippets/s_masonry_block.xml
@@ -13,21 +13,21 @@
 <template id="s_masonry_block_default_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 1 / 11 / 7; z-index: 5;" contenteditable="false">
+            style="grid-area: 1 / 1 / 11 / 7; z-index: 1;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 7 / 6 / 10; z-index: 5;" >
+            style="grid-area: 1 / 7 / 6 / 10; z-index: 2;" >
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc3" data-name="Block"
-            style="grid-area: 1 / 10 / 6 / 13; z-index: 5;">
+            style="grid-area: 1 / 10 / 6 / 13; z-index: 3;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc4" data-name="Block"
-            style="grid-area: 6 / 7 / 11 / 10; z-index: 5;">
+            style="grid-area: 6 / 7 / 11 / 10; z-index: 4;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -42,22 +42,22 @@
 <template id="s_masonry_block_reversed_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc3" data-name="Block"
-            style="grid-area: 1 / 1 / 6 / 4; z-index: 5;">
+            style="grid-area: 1 / 1 / 6 / 4; z-index: 1;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 4 / 6 / 7; z-index: 5;">
+            style="grid-area: 1 / 4 / 6 / 7; z-index: 2;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 6 / 1 / 11 / 4; z-index: 5;">
+            style="grid-area: 6 / 1 / 11 / 4; z-index: 3;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc4" data-name="Block"
-            style="grid-area: 6 / 4 / 11 / 7; z-index: 5;">
+            style="grid-area: 6 / 4 / 11 / 7; z-index: 4;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -71,7 +71,7 @@
 <template id="s_masonry_block_images_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 1 / 11 / 7; z-index: 2;" contenteditable="false">
+            style="grid-area: 1 / 1 / 11 / 7; z-index: 1;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
@@ -84,16 +84,16 @@
 <template id="s_masonry_block_image_texts_image_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 1 / 11 / 4; z-index: 4;" contenteditable="false">
+            style="grid-area: 1 / 1 / 11 / 4; z-index: 1;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 4 / 6 / 7; z-index: 4;">
+            style="grid-area: 1 / 4 / 6 / 7; z-index: 2;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc4" data-name="Block"
-            style="grid-area: 6 / 4 / 11 / 7; z-index: 4;">
+            style="grid-area: 6 / 4 / 11 / 7; z-index: 3;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -107,26 +107,26 @@
 <template id="s_masonry_block_mosaic_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="12">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc3" data-name="Block"
-            style="grid-area: 1 / 1 / 3 / 4; z-index: 6;">
+            style="grid-area: 1 / 1 / 3 / 4; z-index: 1;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 4 / 3 / 7; z-index: 6;">
+            style="grid-area: 1 / 4 / 3 / 7; z-index: 2;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 3 / 1 / 13 / 7; z-index: 6;" contenteditable="false">
+            style="grid-area: 3 / 1 / 13 / 7; z-index: 3;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
 
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 7 / 11 / 13; z-index: 6;" contenteditable="false">
+            style="grid-area: 1 / 7 / 11 / 13; z-index: 4;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 11 / 7 / 13 / 10; z-index: 6;">
+            style="grid-area: 11 / 7 / 13 / 10; z-index: 5;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -141,22 +141,22 @@
 <template id="s_masonry_block_texts_image_texts_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc3" data-name="Block"
-            style="grid-area: 1 / 1 / 6 / 4; z-index: 5;">
+            style="grid-area: 1 / 1 / 6 / 4; z-index: 1;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 6 / 1 / 11 / 4; z-index: 5;">
+            style="grid-area: 6 / 1 / 11 / 4; z-index: 2;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
 
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 4 / 11 / 10; z-index: 5;" contenteditable="false">
+            style="grid-area: 1 / 4 / 11 / 10; z-index: 3;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 10 / 6 / 13; z-index: 5;">
+            style="grid-area: 1 / 10 / 6 / 13; z-index: 4;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -171,17 +171,17 @@
 <template id="s_masonry_block_alternation_text_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="2">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 1 / 3 / 4; z-index: 4;">
+            style="grid-area: 1 / 1 / 3 / 4; z-index: 1;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc4" data-name="Block"
-            style="grid-area: 1 / 4 / 3 / 7; z-index: 4;">
+            style="grid-area: 1 / 4 / 3 / 7; z-index: 2;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 7 / 3 / 10; z-index: 4;">
+            style="grid-area: 1 / 7 / 3 / 10; z-index: 3;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -196,16 +196,16 @@
 <template id="s_masonry_block_alternation_text_image_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 1 / 11 / 4; z-index: 4;">
+            style="grid-area: 1 / 1 / 11 / 4; z-index: 1;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 4 / 11 / 7; z-index: 4;" contenteditable="false">
+            style="grid-area: 1 / 4 / 11 / 7; z-index: 2;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 7 / 11 / 10; z-index: 4;">
+            style="grid-area: 1 / 7 / 11 / 10; z-index: 3;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
@@ -219,16 +219,16 @@
 <template id="s_masonry_block_alternation_image_text_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 1 / 11 / 4; z-index: 4;" contenteditable="false">
+            style="grid-area: 1 / 1 / 11 / 4; z-index: 1;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc4" data-name="Block"
-            style="grid-area: 1 / 4 / 11 / 7; z-index: 4;">
+            style="grid-area: 1 / 4 / 11 / 7; z-index: 2;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 7 / 11 / 10; z-index: 4;" contenteditable="false">
+            style="grid-area: 1 / 7 / 11 / 10; z-index: 3;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc3" data-name="Block"
@@ -242,12 +242,12 @@
 <template id="s_masonry_block_alternation_text_image_text_template" groups="base.group_user">
     <div class="row o_grid_mode" data-row-count="10">
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"
-            style="grid-area: 1 / 1 / 11 / 4; z-index: 3;">
+            style="grid-area: 1 / 1 / 11 / 4; z-index: 1;">
             <h3>A great title</h3>
             <p>And a great subtitle</p>
         </div>
         <div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
-            style="grid-area: 1 / 4 / 11 / 10; z-index: 3;" contenteditable="false">
+            style="grid-area: 1 / 4 / 11 / 10; z-index: 2;" contenteditable="false">
             <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
         </div>
         <div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"