diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss
index f1bb7bee49..da777c0bba 100644
--- a/core/src/components/checkbox/checkbox.ios.scss
+++ b/core/src/components/checkbox/checkbox.ios.scss
@@ -69,14 +69,14 @@
 // iOS Checkbox Within An Item
 // -----------------------------------------
 
-// :host-context(.item)
 :host(.in-item) {
-  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
+  // end position by default
+  @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
 
   display: block;
   position: static;
 }
 
-:host(.in-item[slot="end"]) {
-  @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
+:host(.in-item[slot="start"]) {
+  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
 }
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index 43cfcdfb3d..33991656d9 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -73,14 +73,15 @@
 // -----------------------------------------
 
 :host(.in-item) {
-  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
+  // end position by default
+  @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
 
   display: block;
   position: static;
 }
 
-:host(.in-item[slot="end"]) {
-  @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
+:host(.in-item[slot="start"]) {
+  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
 }
 
 // REVIEW
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index edb88316ac..19c2de244d 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -24,6 +24,7 @@
   position: relative;
 
   user-select: none;
+  z-index: $z-index-item-input;
 }
 
 :host(.ion-color) {
diff --git a/core/src/components/checkbox/test/basic/index.html b/core/src/components/checkbox/test/basic/index.html
index ccb5ef28ba..969a11dd2e 100644
--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -27,7 +27,7 @@
 
       <ion-item>
         <ion-label>Primary</ion-label>
-        <ion-checkbox checked color="primary"></ion-checkbox>
+        <ion-checkbox checked color="primary" slot="end"></ion-checkbox>
       </ion-item>
 
       <ion-item>
@@ -50,24 +50,29 @@
         <ion-checkbox checked color="warning"></ion-checkbox>
       </ion-item>
 
+      <ion-item>
+        <ion-label>Dark</ion-label>
+        <ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
+      </ion-item>
+
       <ion-item>
         <ion-label>Danger</ion-label>
-        <ion-checkbox checked color="danger"></ion-checkbox>
+        <ion-checkbox checked color="danger" slot="start"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Light</ion-label>
-        <ion-checkbox checked color="light"></ion-checkbox>
+        <ion-checkbox checked color="light" slot="start"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Medium</ion-label>
-        <ion-checkbox checked color="medium"></ion-checkbox>
+        <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>
diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss
index cb75597e45..a91351d74d 100644
--- a/core/src/themes/ionic.globals.scss
+++ b/core/src/themes/ionic.globals.scss
@@ -57,6 +57,7 @@ $z-index-backdrop:               2;
 $z-index-overlay-wrapper:        10;
 
 $z-index-item-options:           1;
+$z-index-item-input:             2;
 $z-index-item-divider:           100;
 
 $z-index-reorder-selected:       100;