diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index 4efbd2fcdd..488ada9217 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -82,8 +82,6 @@
 :host(.input-fill-outline) .label-text-wrapper,
 :host(.input-fill-outline) .label-text-wrapper {
   position: relative;
-
-  z-index: 1;
 }
 
 /**
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 4a18956e01..962f1cd934 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -581,6 +581,13 @@
   @include transform-origin(start, top);
 
   max-width: 100%;
+
+  /**
+   * The 2 ensures the label
+   * remains on top of any browser
+   * autofill background too.
+   */
+  z-index: 2;
 }
 
 /**
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts b/core/src/components/input/test/label-placement/input.e2e.ts
index 218e718a3d..2dc2179338 100644
--- a/core/src/components/input/test/label-placement/input.e2e.ts
+++ b/core/src/components/input/test/label-placement/input.e2e.ts
@@ -186,9 +186,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-slot-truncate`));
     });
   });
-});
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: async label'), () => {
     test('input should re-render when label slot is added async', async ({ page }) => {
       await page.setContent(
@@ -213,4 +210,27 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-async-label`));
     });
   });
+  test.describe(title('input: floating/stacked label layering'), () => {
+    test('label should not be covered by text field', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/27812',
+      });
+      await page.setContent(
+        `
+        <style>
+          .custom-input .native-wrapper {
+            background: pink;
+          }
+        </style>
+        <ion-input class="custom-input" label="My Label" label-placement="stacked"></ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-layering`));
+    });
+  });
 });
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..073224da4e
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5452a219ab
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0fa20ccd64
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
index a50672c3bf..f755c5dffe 100644
--- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts
+++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
@@ -302,4 +302,27 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await expect(page.locator('.container')).toHaveScreenshot(screenshot(`textarea-multi-line-sizing`));
     });
   });
+  test.describe(title('textarea: floating/stacked label layering'), () => {
+    test('label should not be covered by text field', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/27812',
+      });
+      await page.setContent(
+        `
+        <style>
+          .custom-textarea .native-wrapper {
+            background: pink;
+          }
+        </style>
+        <ion-textarea class="custom-textarea" label="My Label" label-placement="stacked"></ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-layering`));
+    });
+  });
 });
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png
index caacec7958..72c3216204 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2caf195984
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5b636ccf87
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cf8b66f47b
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-layering-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss
index 76f20279ae..6def3ba0ab 100644
--- a/core/src/components/textarea/textarea.md.outline.scss
+++ b/core/src/components/textarea/textarea.md.outline.scss
@@ -82,8 +82,6 @@
 :host(.textarea-fill-outline) .label-text-wrapper,
 :host(.textarea-fill-outline) .label-text-wrapper {
   position: relative;
-
-  z-index: 1;
 }
 
 /**
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index e656910bd8..f9a60a0125 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -629,6 +629,13 @@
   @include padding(0px);
 
   max-width: 100%;
+
+  /**
+   * The 2 ensures the label
+   * remains on top of any browser
+   * autofill background too.
+   */
+  z-index: 2;
 }
 
 /**