--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -423,22 +423,16 @@ class GridInspector {
         );
         gridData.parentNodeActorID = parentGridNodeFront.actorID;
         grids[parentIndex].subgrids.push(gridData.id);
       }
 
       grids.push(gridData);
     }
 
-    // We need to make sure that nested subgrids are displayed above their parent grid
-    // containers, so update the z-index of each grid before rendering them.
-    for (const root of grids.filter(g => !g.parentNodeActorID)) {
-      this._updateZOrder(grids, root);
-    }
-
     this.store.dispatch(updateGrids(grids));
     this.inspector.emit("grid-panel-updated");
   }
 
   /**
    * Handler for "grid-highlighter-shown" events emitted from the
    * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
    * Required since on and off events need the same reference object.
@@ -734,31 +728,11 @@ class GridInspector {
     const { grids } = this.store.getState();
 
     for (const grid of grids) {
       if (grid.highlighted) {
         this.highlighters.showGridHighlighter(grid.nodeFront);
       }
     }
   }
-
-  /**
-   * Set z-index of each grids so that nested subgrids are always above their parent grid
-   * container.
-   *
-   * @param {Array} grids
-   *        A list of grid data.
-   * @param {Object} parent
-   *        A grid data of parent.
-   * @param {Number} zIndex
-   *        z-index for the parent.
-   */
-  _updateZOrder(grids, parent, zIndex = 0) {
-    parent.zIndex = zIndex;
-
-    for (const childIndex of parent.subgrids) {
-      // Recurse into children grids.
-      this._updateZOrder(grids, grids[childIndex], zIndex + 1);
-    }
-  }
 }
 
 module.exports = GridInspector;

--- a/devtools/client/inspector/grids/test/browser.ini
+++ b/devtools/client/inspector/grids/test/browser.ini
@@ -23,17 +23,16 @@ support-files =
 [browser_grids_grid-list-element-rep.js]
 [browser_grids_grid-list-no-grids.js]
 [browser_grids_grid-list-on-iframe-reloaded.js]
 skip-if = (verify && (os == 'win' || os == 'linux'))
 [browser_grids_grid-list-on-mutation-element-added.js]
 skip-if = true #Bug 1557326
 [browser_grids_grid-list-on-mutation-element-removed.js]
 [browser_grids_grid-list-subgrids.js]
-[browser_grids_grid-list-subgrids-z-order.js]
 [browser_grids_grid-list-toggle-grids_01.js]
 [browser_grids_grid-list-toggle-grids_02.js]
 [browser_grids_grid-list-toggle-multiple-grids.js]
 [browser_grids_grid-outline-cannot-show-outline.js]
 [browser_grids_grid-outline-highlight-area.js]
 skip-if = (verify && (os == 'win')) || (os == "win" && os_version == "10.0" && !debug) #Bug 1501760
 [browser_grids_grid-outline-highlight-cell.js]
 skip-if = (verify && (os == 'win')) || (os == "win" && os_version == "10.0" && asan) #Bug 1501317

deleted file mode 100644
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test the z order of grids.
-
-const TEST_URI = URL_ROOT + "doc_subgrid.html";
-
-add_task(async () => {
-  await addTab(TEST_URI);
-  const { gridInspector, inspector } = await openLayoutView();
-  const { document: doc } = gridInspector;
-  const { highlighters, store } = inspector;
-
-  await selectNode("#grid", inspector);
-  const parentEl = doc.getElementById("grid-list");
-  // Input for .container
-  const parentInput = parentEl.children[0].querySelector("input");
-  const subgridEl = parentEl.children[1];
-  // Input for <main>
-  const subgridInput = subgridEl.children[1].querySelector("input");
-  const grandSubgridEl = subgridEl.children[2];
-  // Input for .aside1
-  const grandSubgridInput = grandSubgridEl.children[0].querySelector("input");
-
-  info(
-    "Toggling ON the CSS grid highlighters for .container, <main> and .aside1"
-  );
-  const grandSubgridFront = await toggle(grandSubgridInput, highlighters);
-  const subgridFront = await toggle(subgridInput, highlighters);
-  let parentFront = await toggle(parentInput, highlighters);
-  await waitUntilState(
-    store,
-    state => state.grids.filter(g => g.highlighted).length === 3
-  );
-
-  info("Check z-index of grid highlighting");
-  is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0");
-  is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
-  is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
-
-  info("Toggling OFF the CSS grid highlighters for .container");
-  await toggle(parentInput, highlighters);
-  await waitUntilState(
-    store,
-    state => state.grids.filter(g => g.highlighted).length === 2
-  );
-
-  info("Check z-index keeps even if the parent grid is hidden");
-  is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
-  is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
-
-  info("Toggling ON again the CSS grid highlighters for .container");
-  parentFront = await toggle(parentInput, highlighters);
-  await waitUntilState(
-    store,
-    state => state.grids.filter(g => g.highlighted).length === 3
-  );
-
-  info("Check z-index of all of grids highlighting keeps");
-  is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0");
-  is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
-  is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
-});
-
-function getZIndex(store, nodeFront) {
-  const grids = store.getState().grids;
-  const gridData = grids.find(g => g.nodeFront === nodeFront);
-  return gridData.zIndex;
-}
-
-async function toggle(input, highlighters) {
-  const eventName = input.checked
-    ? "grid-highlighter-hidden"
-    : "grid-highlighter-shown";
-  const onHighlighterEvent = highlighters.once(eventName);
-  input.click();
-  const nodeFront = await onHighlighterEvent;
-  return nodeFront;
-}

--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -499,18 +499,17 @@ class HighlightersOverlay {
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront for which we need highlighter settings.
    */
   getGridHighlighterSettings(nodeFront) {
     const { grids, highlighterSettings } = this.store.getState();
     const grid = grids.find(g => g.nodeFront === nodeFront);
     const color = grid ? grid.color : DEFAULT_HIGHLIGHTER_COLOR;
-    const zIndex = grid ? grid.zIndex : 0;
-    return Object.assign({}, highlighterSettings, { color, zIndex });
+    return Object.assign({}, highlighterSettings, { color });
   }
 
   /**
    * Toggle the grid highlighter for the given grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to highlight.
    * @param. {String} trigger

--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -182,18 +182,16 @@ const gCachedGridPattern = new Map();
  *        Line number of the grid line to highlight.
  * @param {String} options.showGridLineNames.type
  *        The dimension type of the grid line.
  * @param {Boolean} options.showGridLineNumbers
  *        Displays the grid line numbers on the grid lines if isShown is true.
  * @param {Boolean} options.showInfiniteLines
  *        Displays an infinite line to represent the grid lines if isShown is
  *        true.
- * @param {Number} options.zIndex
- *        The z-index to decide the displaying order.
  *
  * Structure:
  * <div class="highlighter-container">
  *   <canvas id="css-grid-canvas" class="css-grid-canvas">
  *   <svg class="css-grid-elements" hidden="true">
  *     <g class="css-grid-regions">
  *       <path class="css-grid-areas" points="..." />
  *       <path class="css-grid-cells" points="..." />
@@ -219,17 +217,16 @@ const gCachedGridPattern = new Map();
  *       <div class="css-grid-infobar-text">
  *         <span class="css-grid-line-infobar-number">Grid Line Number</span>
  *         <span class="css-grid-line-infobar-names">Grid Line Names></span>
  *       </div>
  *     </div>
  *   </div>
  * </div>
  */
-
 class CssGridHighlighter extends AutoRefreshHighlighter {
   constructor(highlighterEnv) {
     super(highlighterEnv);
 
     this.ID_CLASS_PREFIX = "css-grid-";
 
     this.markup = new CanvasFrameAnonymousContentHelper(
       this.highlighterEnv,
@@ -1791,19 +1788,16 @@ class CssGridHighlighter extends AutoRef
   /**
    * Update the highlighter on the current highlighted node (the one that was
    * passed as an argument to show(node)). Should be called whenever node's geometry
    * or grid changes.
    */
   _update() {
     setIgnoreLayoutChanges(true);
 
-    // Set z-index.
-    this.markup.content.setStyle("z-index", this.options.zIndex);
-
     const root = this.getElement("root");
     const cells = this.getElement("cells");
     const areas = this.getElement("areas");
 
     // Set the grid cells and areas fill to the current grid colour.
     cells.setAttribute("style", `fill: ${this.color}`);
     areas.setAttribute("style", `fill: ${this.color}`);
 

--- a/dom/base/AnonymousContent.cpp
+++ b/dom/base/AnonymousContent.cpp
@@ -202,22 +202,10 @@ void AnonymousContent::GetTargetIdForEve
   if (el && el->IsInNativeAnonymousSubtree() && mContentNode->Contains(el)) {
     aResult.SetKnownLiveAtom(el->GetID(), DOMString::eTreatNullAsNull);
     return;
   }
 
   aResult.SetNull();
 }
 
-void AnonymousContent::SetStyle(const nsAString& aProperty,
-                                const nsAString& aValue, ErrorResult& aRv) {
-  if (!mContentNode->IsHTMLElement()) {
-    aRv.Throw(NS_ERROR_NOT_AVAILABLE);
-    return;
-  }
-
-  nsGenericHTMLElement* element = nsGenericHTMLElement::FromNode(mContentNode);
-  nsCOMPtr<nsICSSDeclaration> declaration = element->Style();
-  declaration->SetProperty(aProperty, aValue, EmptyString());
-}
-
 }  // namespace dom
 }  // namespace mozilla

--- a/dom/base/AnonymousContent.h
+++ b/dom/base/AnonymousContent.h
@@ -66,19 +66,16 @@ class AnonymousContent final {
                                 ErrorResult& aError);
 
   void GetComputedStylePropertyValue(const nsAString& aElementId,
                                      const nsAString& aPropertyName,
                                      DOMString& aResult, ErrorResult& aRv);
 
   void GetTargetIdForEvent(Event& aEvent, DOMString& aResult);
 
-  void SetStyle(const nsAString& aProperty, const nsAString& aValue,
-                ErrorResult& aRv);
-
  private:
   ~AnonymousContent();
   RefPtr<Element> mContentNode;
 };
 
 }  // namespace dom
 }  // namespace mozilla
 

--- a/dom/base/test/mochitest.ini
+++ b/dom/base/test/mochitest.ini
@@ -252,17 +252,16 @@ skip-if = fission # Crashes: @ mozilla::
 skip-if = fission # Crashes: @ mozilla::dom::ContentParent::RecvDetachBrowsingContext(unsigned long, std::function<void (bool const&)>&&)
 [test_anchor_area_referrer_rel.html]
 [test_anonymousContent_api.html]
 [test_anonymousContent_append_after_reflow.html]
 [test_anonymousContent_canvas.html]
 skip-if = headless # Bug 1405867
 [test_anonymousContent_insert.html]
 [test_anonymousContent_manipulate_content.html]
-[test_anonymousContent_set_style.html]
 [test_anonymousContent_style_csp.html]
 [test_appname_override.html]
 [test_async_setTimeout_stack.html]
 [test_async_setTimeout_stack_across_globals.html]
 [test_audioWindowUtils.html]
 [test_audioNotification.html]
 tags = audiochannel
 skip-if = (os == "win" && processor == "aarch64") # bug 1535775

--- a/dom/base/test/test_anonymousContent_api.html
+++ b/dom/base/test/test_anonymousContent_api.html
@@ -41,16 +41,16 @@ https://bugzilla.mozilla.org/show_bug.cg
   let div = document.createElement("div");
   div.textContent = "this is a test element";
   let anonymousContent = chromeDocument.insertAnonymousContent(div);
   ok(anonymousContent, "AnonymousContent object returned");
 
   let members = ["getTextContentForElement", "setTextContentForElement",
                  "getAttributeForElement", "setAttributeForElement",
                  "removeAttributeForElement", "getCanvasContext",
-                 "setAnimationForElement", "setStyle"];
+                 "setAnimationForElement"];
   for (let member of members) {
     ok(member in anonymousContent, "AnonymousContent object defines " + member);
   }
   chromeDocument.removeAnonymousContent(anonymousContent);
   </script>
 </body>
 </html>

deleted file mode 100644
--- a/dom/base/test/test_anonymousContent_set_style.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1571650
--->
-<head>
-  <meta charset="utf-8">
-  <title>Test for Bug 1571650 - Test AnonymousContent.setStyle() API</title>
-  <script src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
-</head>
-<body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1571650">Mozilla Bug 1571650</a>
-  <script type="application/javascript">
-  const chromeWindow = SpecialPowers.wrap(window);
-  const chromeDocument = SpecialPowers.wrap(document);
-
-  const { require } = chromeWindow.ChromeUtils.import(
-    "resource://devtools/shared/Loader.jsm"
-  );
-  const {
-    DocumentWalker,
-  } = require("devtools/server/actors/inspector/document-walker");
-  const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants");
-
-  info("Set z-index to anonymous content");
-  const div = document.createElement("div");
-  div.setAttribute("class", "set-style-test");
-  const anonymousContent = chromeDocument.insertAnonymousContent(div);
-  anonymousContent.setStyle("z-index", 3);
-
-  info("Test the element which became to anonymous");
-  const walker = new DocumentWalker(chromeDocument, chromeWindow);
-  walker.filter = node => {
-    node = SpecialPowers.wrap(node);
-    return node.classList && node.classList.contains("set-style-test")
-         ? nodeFilterConstants.FILTER_ACCEPT
-         : nodeFilterConstants.FILTER_SKIP;
-  };
-  const anonymousDiv = SpecialPowers.wrap(walker.nextNode());
-  ok(anonymousDiv, "Element which became to anonymous is found");
-  is(anonymousDiv.style.zIndex, "3", "z-index is correct");
-
-  chromeDocument.removeAnonymousContent(anonymousContent);
-  </script>
-</body>
-</html>

--- a/dom/webidl/AnonymousContent.webidl
+++ b/dom/webidl/AnonymousContent.webidl
@@ -86,15 +86,9 @@ interface AnonymousContent {
   DOMString? getComputedStylePropertyValue(DOMString elementId,
                                            DOMString propertyName);
 
   /**
    * If event's original target is in the anonymous content, this returns the id
    * attribute value of the target.
    */
   DOMString? getTargetIdForEvent(Event event);
-
-  /**
-   * Set given style to this AnonymousContent.
-   */
-  [Throws]
-  void setStyle(DOMString property, DOMString value);
 };