diff --git a/__mocks__/popper.js.js b/__mocks__/popper.js.js
new file mode 100644
index 00000000..d0f3c53c
--- /dev/null
+++ b/__mocks__/popper.js.js
@@ -0,0 +1,13 @@
+import PopperJs from 'popper.js'
+
+export default class Popper {
+  static placements = PopperJs.placements;
+
+  constructor () {
+    return {
+      destroy: () => {},
+      update: () => {},
+      scheduleUpdate: () => {}
+    }
+  }
+}
diff --git a/babel.config.js b/babel.config.js
index 691f4205..1e8fb78c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
   ],
   'env': {
     'test': {
-      'plugins': ['@babel/plugin-transform-modules-commonjs']
+      'plugins': ['@babel/plugin-transform-modules-commonjs', '@babel/plugin-proposal-class-properties']
     }
   }
 }
diff --git a/example/Demo.vue b/example/Demo.vue
index cd085741..b7072985 100644
--- a/example/Demo.vue
+++ b/example/Demo.vue
@@ -206,6 +206,22 @@
       </code>
     </div>
 
+    <div class="example">
+      <h3>Placement</h3>
+      <datepicker :placement="placement"></datepicker>
+      <code>
+        &lt;datepicker :placement="{{ placement }}"&gt;&lt;/datepicker&gt;
+      </code>
+      <div class="settings">
+        <h5>Settings</h5>
+        <select v-model="placement">
+          <option value="auto">Auto</option>
+          <option value="top">Top</option>
+          <option value="bottom">Bottom</option>
+        </select>
+      </div>
+    </div>
+
     <div class="example">
       <h3>Day view only</h3>
       <datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
@@ -245,7 +261,6 @@
         &lt;datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"&gt;&lt;/datepicker&gt;
       </code>
     </div>
-
   </div>
 </template>
 
@@ -287,7 +302,8 @@ export default {
       state: state,
       vModelExample: null,
       languages: lang,
-      language: 'en'
+      language: 'en',
+      placement: 'auto',
     }
   },
   computed: {
diff --git a/example/main.js b/example/main.js
index 63a2cfae..6835cd72 100644
--- a/example/main.js
+++ b/example/main.js
@@ -4,7 +4,7 @@ import Demo from './Demo.vue'
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
-new Vue({
+window.app = new Vue({
   el: '#app',
   render: h => h(Demo)
 })
diff --git a/package-lock.json b/package-lock.json
index d8d4a9fa..346e6956 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -162,6 +162,144 @@
         "@babel/types": "^7.4.4"
       }
     },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.5.tgz",
+      "integrity": "sha512-ZsxkyYiRA7Bg+ZTRpPvB6AbOFKTFFK4LrvTet8lInm0V468MWCaSYJE+I7v2z2r8KNLtYiV+K5kTCnR7dvyZjg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/helper-member-expression-to-functions": "^7.5.5",
+        "@babel/helper-optimise-call-expression": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-replace-supers": "^7.5.5",
+        "@babel/helper-split-export-declaration": "^7.4.4"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
+          "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.0.0"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz",
+          "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.5.5",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0",
+            "trim-right": "^1.0.1"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz",
+          "integrity": "sha512-5qZ3D1uMclSNqYcXqiHoA0meVdv+xUEex9em2fqMnrk/scphGlGgg66zjMrPJESPwrFJ6sbfFQYUSa0Mz7FabA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.5.5"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz",
+          "integrity": "sha512-XvRFWrNnlsow2u7jXDuH4jDDctkxbS7gXssrP4q2nUD606ukXHRvydj346wmNg+zAgpFx4MWf4+usfC93bElJg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.5.5",
+            "@babel/helper-optimise-call-expression": "^7.0.0",
+            "@babel/traverse": "^7.5.5",
+            "@babel/types": "^7.5.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz",
+          "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz",
+          "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.5.5",
+            "@babel/generator": "^7.5.5",
+            "@babel/helper-function-name": "^7.1.0",
+            "@babel/helper-split-export-declaration": "^7.4.4",
+            "@babel/parser": "^7.5.5",
+            "@babel/types": "^7.5.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz",
+          "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "globals": {
+          "version": "11.12.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+          "dev": true
+        },
+        "jsesc": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+          "dev": true
+        },
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        },
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+          "dev": true
+        }
+      }
+    },
     "@babel/helper-define-map": {
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz",
@@ -405,6 +543,16 @@
         "@babel/plugin-syntax-async-generators": "^7.2.0"
       }
     },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz",
+      "integrity": "sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.5.5",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-proposal-json-strings": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz",
@@ -10292,6 +10440,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
diff --git a/package.json b/package.json
index 7db09140..60ce036d 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,9 @@
     "lint",
     "test"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "popper.js": "^1.15.0"
+  },
   "peerDependencies": {
     "vue": "^2.6.10"
   },
@@ -45,6 +47,7 @@
     "@babel/core": "^7.4.5",
     "@babel/node": "^7.4.5",
     "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 67055bef..33859370 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -30,70 +30,70 @@
     </date-input>
 
 
-    <!-- Day View -->
-    <picker-day
-      v-if="allowedToShowView('day')"
-      :pageDate="pageDate"
-      :selectedDate="selectedDate"
-      :showDayView="showDayView"
-      :fullMonthName="fullMonthName"
-      :allowedToShowView="allowedToShowView"
-      :disabledDates="disabledDates"
-      :highlighted="highlighted"
-      :calendarClass="calendarClass"
-      :calendarStyle="calendarStyle"
-      :translation="translation"
-      :pageTimestamp="pageTimestamp"
-      :isRtl="isRtl"
-      :mondayFirst="mondayFirst"
-      :dayCellContent="dayCellContent"
-      :use-utc="useUtc"
-      @changedMonth="handleChangedMonthFromDayPicker"
-      @selectDate="selectDate"
-      @showMonthCalendar="showMonthCalendar"
-      @selectedDisabled="selectDisabledDate">
-      <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
-    </picker-day>
+    <div class="vdp-datepicker__container" v-show="isOpen">
+      <!-- Day View -->
+      <picker-day
+        v-if="allowedToShowView('day')"
+        :pageDate="pageDate"
+        :selectedDate="selectedDate"
+        :showDayView="showDayView"
+        :fullMonthName="fullMonthName"
+        :allowedToShowView="allowedToShowView"
+        :disabledDates="disabledDates"
+        :highlighted="highlighted"
+        :calendarClass="calendarClass"
+        :translation="translation"
+        :pageTimestamp="pageTimestamp"
+        :isRtl="isRtl"
+        :mondayFirst="mondayFirst"
+        :dayCellContent="dayCellContent"
+        :use-utc="useUtc"
+        @changedMonth="handleChangedMonthFromDayPicker"
+        @selectDate="selectDate"
+        @showMonthCalendar="showMonthCalendar"
+        @selectedDisabled="selectDisabledDate">
+        <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
+      </picker-day>
 
-    <!-- Month View -->
-    <picker-month
-      v-if="allowedToShowView('month')"
-      :pageDate="pageDate"
-      :selectedDate="selectedDate"
-      :showMonthView="showMonthView"
-      :allowedToShowView="allowedToShowView"
-      :disabledDates="disabledDates"
-      :calendarClass="calendarClass"
-      :calendarStyle="calendarStyle"
-      :translation="translation"
-      :isRtl="isRtl"
-      :use-utc="useUtc"
-      @selectMonth="selectMonth"
-      @showYearCalendar="showYearCalendar"
-      @changedYear="setPageDate">
-      <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
-    </picker-month>
+      <!-- Month View -->
+      <picker-month
+        v-if="allowedToShowView('month')"
+        :pageDate="pageDate"
+        :selectedDate="selectedDate"
+        :showMonthView="showMonthView"
+        :allowedToShowView="allowedToShowView"
+        :disabledDates="disabledDates"
+        :calendarClass="calendarClass"
+        :translation="translation"
+        :isRtl="isRtl"
+        :use-utc="useUtc"
+        @selectMonth="selectMonth"
+        @showYearCalendar="showYearCalendar"
+        @changedYear="setPageDate">
+        <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
+      </picker-month>
 
-    <!-- Year View -->
-    <picker-year
-      v-if="allowedToShowView('year')"
-      :pageDate="pageDate"
-      :selectedDate="selectedDate"
-      :showYearView="showYearView"
-      :allowedToShowView="allowedToShowView"
-      :disabledDates="disabledDates"
-      :calendarClass="calendarClass"
-      :calendarStyle="calendarStyle"
-      :translation="translation"
-      :isRtl="isRtl"
-      :use-utc="useUtc"
-      @selectYear="selectYear"
-      @changedDecade="setPageDate">
-      <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
-    </picker-year>
+      <!-- Year View -->
+      <picker-year
+        v-if="allowedToShowView('year')"
+        :pageDate="pageDate"
+        :selectedDate="selectedDate"
+        :showYearView="showYearView"
+        :allowedToShowView="allowedToShowView"
+        :disabledDates="disabledDates"
+        :calendarClass="calendarClass"
+        :translation="translation"
+        :isRtl="isRtl"
+        :use-utc="useUtc"
+        @selectYear="selectYear"
+        @changedDecade="setPageDate">
+        <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
+      </picker-year>
+    </div>
   </div>
 </template>
 <script>
+import Popper from 'popper.js'
 import en from '../locale/translations/en'
 import DateInput from './DateInput.vue'
 import PickerDay from './PickerDay.vue'
@@ -153,6 +153,13 @@ export default {
     maximumView: {
       type: String,
       default: 'year'
+    },
+    placement: {
+      type: String,
+      default: 'auto',
+      validator: function (value) {
+        return ['top', 'bottom', 'auto'].indexOf(value) !== -1
+      }
     }
   },
   data () {
@@ -195,6 +202,15 @@ export default {
     },
     initialView () {
       this.setInitialView()
+    },
+    isInline (val) {
+      if (val) { this.initPopper() } else { this.destroyPopper() }
+    },
+    placement () {
+      this.setPlacement()
+    },
+    isRtl () {
+      this.setPlacement()
     }
   },
   computed: {
@@ -208,16 +224,9 @@ export default {
     pageDate () {
       return new Date(this.pageTimestamp)
     },
-
     translation () {
       return this.language
     },
-
-    calendarStyle () {
-      return {
-        position: this.isInline ? 'static' : undefined
-      }
-    },
     isOpen () {
       return this.showDayView || this.showMonthView || this.showYearView
     },
@@ -251,6 +260,12 @@ export default {
       if (this.isOpen) {
         return this.close(true)
       }
+      if (this.popper) {
+        this.$nextTick(() => {
+          this.popper.update()
+        })
+      }
+
       this.setInitialView()
     },
     /**
@@ -261,6 +276,7 @@ export default {
       if (!this.allowedToShowView(initialView)) {
         throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
       }
+
       switch (initialView) {
         case 'year':
           this.showYearCalendar()
@@ -451,6 +467,41 @@ export default {
       if (this.isInline) {
         this.setInitialView()
       }
+      if (!this.isInline) {
+        this.initPopper()
+      }
+    },
+    /**
+     * Initiate Popper.js
+     */
+    initPopper () {
+      if (this.popper) { this.destroyPopper() }
+
+      const direction = this.isRtl ? 'end' : 'start'
+      const placement = `${this.placement}-${direction}`
+      const refEl = this.$el.querySelector('input')
+      const popperEl = this.$el.querySelector('.vdp-datepicker__container')
+
+      this.popper = new Popper(refEl, popperEl, { placement: placement })
+    },
+    /**
+     * Set Popper Placement
+     */
+    setPlacement () {
+      const direction = this.isRtl ? 'end' : 'start'
+      const placement = `${this.placement}-${direction}`
+
+      this.popper.options.placement = placement
+      this.$nextTick(() => {
+        this.popper.update()
+      })
+    },
+    /**
+     * Destroy Popper.js
+     */
+    destroyPopper () {
+      this.popper.destroy()
+      this.popper = null
     }
   },
   mounted () {
diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index 819d0633..945d22fd 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" :style="calendarStyle" @mousedown.prevent>
+  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" @mousedown.prevent>
     <slot name="beforeCalendarHeader"></slot>
     <header>
       <span
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index a1bd64d4..97a4ce9b 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" :style="calendarStyle" @mousedown.prevent>
+  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" @mousedown.prevent>
     <slot name="beforeCalendarHeader"></slot>
     <header>
       <span
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 2060106e..b7b46d1b 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" :style="calendarStyle" @mousedown.prevent>
+  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" @mousedown.prevent>
     <slot name="beforeCalendarHeader"></slot>
     <header>
       <span
diff --git a/src/styles/style.styl b/src/styles/style.styl
index a922d7da..1ac80002 100644
--- a/src/styles/style.styl
+++ b/src/styles/style.styl
@@ -6,9 +6,10 @@
     *
         box-sizing border-box
 
+.vdp-datepicker__container
+  z-index: 100
+
 .vdp-datepicker__calendar
-    position absolute
-    z-index 100
     background white
     width 300px
     border 1px solid #ccc