diff --git a/components/dropdown/dropdown-content-mixin.js b/components/dropdown/dropdown-content-mixin.js
index 11e6afb6268..176254d7b88 100644
--- a/components/dropdown/dropdown-content-mixin.js
+++ b/components/dropdown/dropdown-content-mixin.js
@@ -1134,7 +1134,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 		}
 		if (this.openedAbove) {
-			position.bottom = window.innerHeight - targetRect.top + 8;
+			position.bottom = window.innerHeight - targetRect.top + this._verticalOffset - 8;
 		} else {
 			position.top = targetRect.top + targetRect.height + this._verticalOffset - 7;
 		}
diff --git a/components/dropdown/test/dropdown-content.vdiff.js b/components/dropdown/test/dropdown-content.vdiff.js
index 769bbcb3afd..2d5d05d0110 100644
--- a/components/dropdown/test/dropdown-content.vdiff.js
+++ b/components/dropdown/test/dropdown-content.vdiff.js
@@ -67,6 +67,7 @@ describe('dropdown-content', () => {
 		{ name: 'no-padding-no-pointer', content: html`<d2l-dropdown-content no-padding no-pointer opened>${basicText}</d2l-dropdown-content>` },
 		{ name: 'scroll-bottom-shadow', content: html`<d2l-dropdown-content opened>${scroll}</d2l-dropdown-content>` },
 		{ name: 'vertical-offset', dropdownStyles: { left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="100" opened>${basicText}</d2l-dropdown-content>` },
+		{ name: 'vertical-offset-above', dropdownStyles: { bottom: '30px', left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="100" opened>${basicText}</d2l-dropdown-content>` },
 		{ name: 'vertical-offset-edge', dropdownStyles: { left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="100" opened>${longerText}</d2l-dropdown-content>` },
 		{ name: 'vertical-offset-negative', dropdownStyles: { left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="-25" opened>${blockText}</d2l-dropdown-content>` },
 		{ name: 'boundary-left-below', dropdownStyles: { left: '50%', top: '50%' }, content: html`<d2l-dropdown-content boundary="{&quot;left&quot;:50, &quot;below&quot;:20}" opened>${longerText}</d2l-dropdown-content>` },
diff --git a/components/dropdown/test/golden/dropdown-content/chromium/vertical-offset-above.png b/components/dropdown/test/golden/dropdown-content/chromium/vertical-offset-above.png
new file mode 100644
index 00000000000..d6aca3c3934
Binary files /dev/null and b/components/dropdown/test/golden/dropdown-content/chromium/vertical-offset-above.png differ
diff --git a/components/popover/popover-mixin.js b/components/popover/popover-mixin.js
index bd23213c491..d08ec86f235 100644
--- a/components/popover/popover-mixin.js
+++ b/components/popover/popover-mixin.js
@@ -469,7 +469,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		}
 
 		if (this._location === 'block-start') {
-			position.bottom = window.innerHeight - openerRect.top + 8;
+			position.bottom = window.innerHeight - openerRect.top + this._offset - 8;
 		} else {
 			position.top = openerRect.top + openerRect.height + this._offset - 7;
 		}