diff --git a/live-examples/css-examples/positioned-layout/meta.json b/live-examples/css-examples/positioned-layout/meta.json
index 5700a5cf3..55e6af4d7 100644
--- a/live-examples/css-examples/positioned-layout/meta.json
+++ b/live-examples/css-examples/positioned-layout/meta.json
@@ -9,6 +9,14 @@
             "fileName": "position.html",
             "title": "CSS Demo: position",
             "type": "css"
+        },
+        "zIndex": {
+            "baseTmpl": "tmpl/live-css-tmpl.html",
+            "cssExampleSrc": "../../live-examples/css-examples/positioned-layout/z-index.css",
+            "exampleCode": "live-examples/css-examples/positioned-layout/z-index.html",
+            "fileName": "z-index.html",
+            "title": "CSS Demo: z-index",
+            "type": "css"
         }
     }
 }
diff --git a/live-examples/css-examples/positioned-layout/z-index.css b/live-examples/css-examples/positioned-layout/z-index.css
new file mode 100644
index 000000000..8c1bbaef5
--- /dev/null
+++ b/live-examples/css-examples/positioned-layout/z-index.css
@@ -0,0 +1,74 @@
+#example-element {
+    top: 15px;
+    left: 15px;
+    width: 180px;
+    height: 230px;
+    position: absolute;
+    /* center the text so it is visible even when z-index is set to auto */
+    line-height: 215px;
+    font-family: monospace;
+    background-color: #fcfbe5;
+    border: solid 5px #e3e0a1;
+    z-index: auto;
+}
+
+.container {
+    display: inline-block;
+    width: 250px;
+    position: relative;
+}
+
+.block {
+    width: 150px;
+    height: 50px;
+    position: absolute;
+    font-family: monospace;
+}
+
+.blue {
+    background-color: #E5E8FC;
+    border: solid 5px #112382;
+    /* move text to the bottom of the box */
+    line-height: 55px;
+}
+
+.red {
+    background-color: #fce5e7;
+    border: solid 5px #e3a1a7;
+}
+
+.position1 {
+    top: 0;
+    left: 0;
+    z-index: 6;
+}
+
+.position2 {
+    top: 30px;
+    left: 30px;
+    z-index: 4;
+}
+
+.position3 {
+    top: 60px;
+    left: 60px;
+    z-index: 2;
+}
+
+.position4 {
+    top: 150px;
+    left: 0;
+    z-index: auto;
+}
+
+.position5 {
+    top: 180px;
+    left: 30px;
+    z-index: auto;
+}
+
+.position6 {
+    top: 210px;
+    left: 60px;
+    z-index: auto;
+}
diff --git a/live-examples/css-examples/positioned-layout/z-index.html b/live-examples/css-examples/positioned-layout/z-index.html
new file mode 100644
index 000000000..ebbb3c42c
--- /dev/null
+++ b/live-examples/css-examples/positioned-layout/z-index.html
@@ -0,0 +1,52 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="zIndex">
+
+    <div class="example-choice" initial-choice="true">
+        <pre><code class="language-css">z-index: auto;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+
+    <div class="example-choice">
+        <pre><code class="language-css">z-index: 1;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+
+    <div class="example-choice">
+        <pre><code class="language-css">z-index: 3;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+
+    <div class="example-choice">
+        <pre><code class="language-css">z-index: 5;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+
+    <div class="example-choice">
+        <pre><code class="language-css">z-index: 7;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+
+</section>
+
+<div id="output" class="output hidden large">
+
+    <section id="default-example" class="default-example container">
+        <div id="example-element">Change my z-index</div>
+        <div class="block blue position1">z-index: 6</div>
+        <div class="block blue position2">z-index: 4</div>
+        <div class="block blue position3">z-index: 2</div>
+        <div class="block red  position4">z-index: auto</div>
+        <div class="block red  position5">z-index: auto</div>
+        <div class="block red  position6">z-index: auto</div>
+    </section>
+
+</div>
diff --git a/live-examples/css-examples/transitions/meta.json b/live-examples/css-examples/transitions/meta.json
index 3b9b7c7a1..de59595c9 100644
--- a/live-examples/css-examples/transitions/meta.json
+++ b/live-examples/css-examples/transitions/meta.json
@@ -48,14 +48,6 @@
             "fileName": "transition-timing-function.html",
             "title": "CSS Demo: transition-timing-function",
             "type": "css"
-        },
-        "zIndex": {
-            "baseTmpl": "tmpl/live-css-tmpl.html",
-            "cssExampleSrc": "../../live-examples/css-examples/transitions/z-index.css",
-            "exampleCode": "live-examples/css-examples/transitions/z-index.html",
-            "fileName": "z-index.html",
-            "title": "CSS Demo: z-index",
-            "type": "css"
         }
     }
 }
diff --git a/live-examples/css-examples/transitions/z-index.css b/live-examples/css-examples/transitions/z-index.css
deleted file mode 100644
index 3ba000dd4..000000000
--- a/live-examples/css-examples/transitions/z-index.css
+++ /dev/null
@@ -1,48 +0,0 @@
-#output section {
-    position: relative;
-}
-
-#example-element {
-    top: 0;
-    left: 0;
-    display: inline-block;
-    background-color: #000;
-    color: #fff;
-    padding: 10px;
-    border: 10px solid #fadb8c;
-    width: 100%;
-    height: 100%;
-    font-size: 1.2em;
-}
-
-.box {
-    position: absolute;
-    top: 70px;
-    display: inline-block;
-    padding: 30px 40px;
-    width: 100px;
-    height: 100px;
-    font-size: 2em;
-}
-
-.level2 {
-    left: 80px;
-    background-color: #edecec;
-    border: 5px solid #fff;
-    z-index: 2;
-}
-
-.level4 {
-    left: 200px;
-    background-color: #999;
-    border: 5px solid #fff;
-    z-index: 4;
-}
-
-.level6 {
-    left: 320px;
-    background-color: #333;
-    color: #fff;
-    border: 5px solid #fff;
-    z-index: 6;
-}
diff --git a/live-examples/css-examples/transitions/z-index.html b/live-examples/css-examples/transitions/z-index.html
deleted file mode 100644
index 0c8253f03..000000000
--- a/live-examples/css-examples/transitions/z-index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<section id="example-choice-list" class="example-choice-list" data-property="zIndex">
-<div class="example-choice">
-<pre><code class="language-css">z-index: 1;</code></pre>
-<button type="button" class="copy hidden" aria-hidden="true">
-    <span class="visually-hidden">Copy to Clipboard</span>
-</button>
-</div>
-
-<div class="example-choice">
-<pre><code class="language-css">z-index: 3;</code></pre>
-<button type="button" class="copy hidden" aria-hidden="true">
-    <span class="visually-hidden">Copy to Clipboard</span>
-</button>
-</div>
-
-<div class="example-choice">
-<pre><code class="language-css">z-index: 5;</code></pre>
-<button type="button" class="copy hidden" aria-hidden="true">
-    <span class="visually-hidden">Copy to Clipboard</span>
-</button>
-</div>
-
-<div class="example-choice">
-<pre><code class="language-css">z-index: 7;</code></pre>
-<button type="button" class="copy hidden" aria-hidden="true">
-    <span class="visually-hidden">Copy to Clipboard</span>
-</button>
-</div>
-</section>
-
-<div id="output" class="output hidden">
-    <section id="default-example">
-        <div class="box level2">2</div>
-        <div id="example-element" class="box">Change my z-index</div>
-        <div class="box level4">4</div>
-        <div class="box level6">6</div>
-    </section>
-</div>