diff --git a/src/components/content/CodeExampleSection/index.tsx b/src/components/content/CodeExampleSection/index.tsx
index 9012323161..d27f85e8bd 100644
--- a/src/components/content/CodeExampleSection/index.tsx
+++ b/src/components/content/CodeExampleSection/index.tsx
@@ -52,18 +52,18 @@ const DesktopCodeBlock = (props: DeskProps) => {
 function CodeExampleSection() {
   return (
     <div className="container my-12 grid place-items-center gap-4 md:grid-cols-12 md:place-items-end">
-      <DesktopCodeBlock className="-z-50 md:col-span-11 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-10 lg:col-start-1" />
+      <DesktopCodeBlock className="z-10 md:col-span-11 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-10 lg:col-start-1" />
       <RenderLabelledCode
         {...searchExample}
-        className="row-start-1 md:col-span-5 md:col-start-9 md:self-end lg:col-span-3 lg:col-start-10"
+        className="z-20 row-start-1 md:col-span-5 md:col-start-9 md:self-end lg:col-span-3 lg:col-start-10"
       />
       <RenderLabelledCode
         {...searchFilterExample}
-        className="row-start-2 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
+        className="z-20 row-start-2 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
       />
       <RenderLabelledCode
         {...imagesExample}
-        className="row-start-3 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
+        className="z-20 row-start-3 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
       />
     </div>
   );