diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 868a84ff885..6d23836d51f 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -9,6 +9,8 @@
  * @prop --calcite-dialog-content-space: Specifies the padding of the component's content.
  * @prop --calcite-dialog-footer-space: Specifies the padding of the component's footer.
  * @prop --calcite-dialog-border-color: Specifies the component's border color.
+ * @prop --calcite-dialog-offset-x: Specifies the horizontal offset of the component.
+ * @prop --calcite-dialog-offset-y: Specifies the vertical offset of the component.
  */
 
 :host {
@@ -132,7 +134,8 @@ calcite-panel {
     opacity-0
     shadow-2-sm
     z-modal
-    rounded;
+    rounded
+    relative;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
   transition:
@@ -143,6 +146,9 @@ calcite-panel {
   --calcite-internal-dialog-hidden-position: translate3d(0, 20px, 0);
   --calcite-internal-dialog-shown-position: translate3d(0, 0, 0);
 
+  inset-inline-start: var(--calcite-dialog-offset-x);
+  inset-block-start: var(--calcite-dialog-offset-y);
+
   &--opening {
     &-idle {
       transform: var(--calcite-internal-dialog-hidden-position);
diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index 88c3f796548..5a0fbcf225f 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -350,9 +350,9 @@ export const footerSlot = (): string => html`
   </calcite-dialog>
 `;
 
-const themedStyle = html` --calcite-dialog-scrim-background-color: purple; --calcite-dialog-size-x: 400px;
+const themedStyle = html`--calcite-dialog-scrim-background-color: purple; --calcite-dialog-size-x: 400px;
 --calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
---calcite-dialog-content-space: 50px;`;
+--calcite-dialog-content-space: 50px; --calcite-dialog-offset-x: 50px; --calcite-dialog-offset-y: -30px;`;
 
 export const themed = (): string =>
   html`<calcite-dialog