diff --git a/core-popup-overlay.html b/core-popup-overlay.html
index 3c85e8c..350fe11 100644
--- a/core-popup-overlay.html
+++ b/core-popup-overlay.html
@@ -28,31 +28,34 @@
       publish: {
 
         /**
-         * The `relatedTarget` is an element used to position the overlay, for example a
-         * button the user taps to show a menu.
+         * The `relatedTarget` is an element used to position the overlay.
          *
          * @attribute relatedTarget
-         * @type Element
+         * @type Node
          */
         relatedTarget: null,
 
         /**
          * The horizontal alignment of the overlay relative to the `relatedTarget`.
+         * `left` means the left edges are aligned together and `right` means the right
+         * edges are aligned together.
          *
          * @attribute halign
-         * @type 'left'|'right'
+         * @type 'left' | 'right'
          * @default 'auto'
          */
         halign: 'left',
 
         /**
-         * The vertical alignment of the overlay relative to the `relatedTarget`.
+         * The vertical alignment of the overlay relative to the `relatedTarget`. `top`
+         * means the top edges are aligned together and `bottom` means the bottom edges
+         * are aligned together.
          *
          * @attribute valign
-         * @type 'top'|'bottom'
-         * @default 'bottom'
+         * @type 'top' | 'bottom'
+         * @default 'top'
          */
-        valign: 'bottom',
+        valign: 'top',
 
         margin: 12
 
@@ -67,23 +70,30 @@
         var top, left, bottom, right;
         var ref = this.relatedTarget.getBoundingClientRect();
 
-        // if (this._shouldPosition.left) {
+        if (this._shouldPosition.left) {
+          this.target.style.left = '-99999px';
+        }
+        if (this._shouldPosition.top) {
+          this.target.style.top = '-99999px';
+        }
+
+        if (this._shouldPosition.left) {
           if (this.halign === 'left') {
             left = ref.left;
           } else if (this.halign === 'right') {
             left = Math.max(ref.right - this.target.offsetWidth, this.margin);
           }
           this.target.style.left = left + 'px';
-        // }
+        }
 
-        // if (this._shouldPosition.top) {
-          if (this.valign === 'bottom') {
+        if (this._shouldPosition.top) {
+          if (this.valign === 'top') {
             top = ref.top;
           } else {
             top = Math.max(ref.bottom - this.target.offsetHeight, this.margin)
           }
           this.target.style.top = top + 'px';
-        // }
+        }
 
       },
 
@@ -99,27 +109,19 @@
 
         var maxW, maxH;
 
-        // if (this._shouldPosition.left) {
-          if (this.halign === 'left') {
-            maxW = window.innerWidth - rect.left - this.margin;
-          } else {
-            maxW = ref.right - rect.left;
-          }
+        if (this._shouldPosition.left) {
+          maxW = window.innerWidth - rect.left - this.margin;
           sizer.style.maxWidth = maxW + 'px';
-        // }
+        }
 
-        // if (this._shouldPosition.top) {
-          if (this.valign === 'bottom') {
-            maxH = window.innerHeight - rect.top - this.margin;
-          } else {
-            maxH = ref.bottom - rect.top;
-          }
+        if (this._shouldPosition.top) {
+          maxH = window.innerHeight - rect.top - this.margin;
           sizer.style.maxHeight = maxH + 'px';
-        // }
+        }
 
-        // if (!this._shouldPosition.left && !this._shouldPosition.top) {
-        //   this.super();
-        // }
+        if (!this._shouldPosition.left && !this._shouldPosition.top) {
+          this.super();
+        }
       }
 
     });
diff --git a/core-popup.css b/core-popup.css
index 283075e..fc1b61a 100644
--- a/core-popup.css
+++ b/core-popup.css
@@ -11,9 +11,5 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   display: block;
   border-radius: 3px;
   color: #000;
-  max-height: inherit;
   overflow: auto;
-  /* initially position offscreen to get the natural offsetWidth and offsetHeight */
-  left: -99999px;
-  top: -99999px;
 }
\ No newline at end of file
diff --git a/core-popup.html b/core-popup.html
index 7ba1b95..2e2dfd5 100644
--- a/core-popup.html
+++ b/core-popup.html
@@ -9,12 +9,50 @@
 
 <!--
 
-`core-popup` is a popup that can be positioned relative to another element, usually the element
-that opens or closes the popup. It can be used to implement various kinds of popup menus.
+`core-popup` is an element that is positioned relatively to another element, usually the
+element that triggers the popup. The popup and the triggering element should be children
+of the same element that has a CSS `position`.
 
 Example:
 
     <template is="auto-binding">
+      <div relative>
+        <div id="trigger">Your favorite pastry:</div>
+        <core-popup relatedTarget="{{$.trigger}}">
+          <core-menu>
+          <core-item label="Churro"></core-item>
+          <core-item label="Donut"></core-item>
+          <core-item label="Macaron"></core-item>
+          </core-menu>
+        </core-popup>
+      </div>
+    </template>
+
+Positioning
+-----------
+
+By default, the popup is positioned on top of the `relatedTarget` with the top and left edges aligned.
+The `halign` and `valign` properties controls the various alignments. The size of the popup is
+automatically restrained such that it is entirely visible on the screen.
+
+If you need more control over the popup's position, use CSS. The `halign` and `valign` properties are
+ignored if either `top` or `left` are set on the popup.
+
+The popup is positioned with `position: absolute` by default. 
+
+Example:
+
+    <style>
+      /* manually position the popup with position: absolute in a container with position: relative so it scrolls with #control */
+      core-popup {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    </style>
+
+    <template is="auto-binding">
+      <div relative>
         <div id="control">Your favorite pastry:</div>
         <core-popup relatedTarget="{{$.control}}">
           <core-menu>
@@ -23,6 +61,7 @@
             <core-item label="Macaron"></core-item>
           </core-menu>
         </core-popup>
+      </div>
     </template>
 
 @group Polymer Core Elements
@@ -61,8 +100,8 @@
     publish: {
 
       /**
-       * The element associated with this menu, usually the element that
-       * causes the menu the open.
+       * The element associated with this menu, usually the element that triggers
+       * the menu.
        *
        * @attribute relatedTarget
        * @type Node
@@ -79,27 +118,26 @@
       opened: false,
 
       /**
-       * The horizontal alignment of the pulldown menu relative to the button.
-       * If set to `auto`, the popup will be positioned the same as `left` if its
-       * natural width can fit in the viewport, otherwise it will be positioned as
-       * `right`.
+       * The horizontal alignment of the popup relative to `relatedTarget`. `left`
+       * means the left edges are aligned together. `right` means the right edges
+       * are aligned together.
        *
        * @attribute halign
        * @type 'left' | 'right'
-       * @default 'auto'
+       * @default 'left'
        */
       halign: 'left',
 
       /**
-       * The vertical alignment of the pulldown menu relative to the button. If set
-       * to `auto`, the popup will be positioned the same as `bottom` if its natural
-       * height can fit in the viewport, otherwise it will be positioned as `top`.
+       * The vertical alignment of the popup relative to `relatedTarget`. `top` means
+       * the top edges are aligned together. `bottom` means the bottom edges are
+       * aligned together.
        *
        * @attribute valign
-       * @type 'bottom' | 'top'
-       * @default 'bottom'
+       * @type 'top' | 'bottom'
+       * @default 'top'
        */
-      valign: 'bottom',
+      valign: 'top',
 
       /**
        * The transition property specifies a string which identifies a 
diff --git a/demo.html b/demo.html
index 5c8cd64..1c00382 100644
--- a/demo.html
+++ b/demo.html
@@ -59,18 +59,26 @@
     }
 
     .toolbar-1 {
-      background-color: #4285f4;
+      background-color: #3b78e7;
     }
 
     .toolbar-2 {
-      background-color: #5e97f6;
+      background-color: #4285f4;
     }
 
     .toolbar-3 {
+      background-color: #5e97f6;
+    }
+
+    .bottom-toolbar-1 {
+      background-color: #0d904f;
+    }
+
+    .bottom-toolbar-2 {
       background-color: #0f9d58;
     }
 
-    .toolbar-4 {
+    .bottom-toolbar-3 {
       background-color: #33ac71;
     }
 
@@ -101,6 +109,7 @@
     <style>
       :host {
         display: inline-block;
+        position: relative;
       }
     </style>
 
@@ -166,7 +175,7 @@
     <div class="toolbar toolbar-1" layout horizontal center>
 
       <div class="toolbar-label">
-        halign=left
+        halign=left valign=top
       </div>
 
       <pop-up halign="left">
@@ -194,7 +203,7 @@ <h2>scrollable-vertical</h2>
     <div class="toolbar toolbar-2" layout horizontal center>
 
       <div class="toolbar-label">
-        halign=right
+        halign=right valign=top
       </div>
 
       <div flex></div>
@@ -230,20 +239,20 @@ <h2>Hello World!</h2>
       <div style="height:2000px;">I am scrollable...</div>
     </div>
 
-    <div class="toolbar toolbar-4" layout horizontal center>
+    <div class="toolbar bottom-toolbar-2" layout horizontal center>
 
       <div class="toolbar-label">
-        halign=left
+        halign=left valign=bottom
       </div>
 
-      <pop-up halign="left" valign="top">
+      <pop-up halign="left" valign="bottom">
         <core-icon-button class="control" icon="menu"></core-icon-button>
         <div class="popup" layout horizontal center-center>
           <h2>Hello World!</h2>
         </div>
       </pop-up>
 
-      <pop-up halign="left" valign="top">
+      <pop-up halign="left" valign="bottom">
         <core-icon-button class="control" icon="menu"></core-icon-button>
         <div class="popup">
           <h2>scrollable-vertical</h2>
@@ -258,15 +267,15 @@ <h2>scrollable-vertical</h2>
 
     </div>
 
-    <div class="toolbar toolbar-3" layout horizontal center>
+    <div class="toolbar bottom-toolbar-1" layout horizontal center>
 
       <div class="toolbar-label">
-        halign=right
+        halign=right valign=bottom
       </div>
 
       <div flex></div>
 
-      <pop-up halign="right" valign="top">
+      <pop-up halign="right" valign="bottom">
         <core-icon-button class="control" icon="menu"></core-icon-button>
         <div class="popup">
           <h2>scrollable-vertical</h2>
@@ -276,7 +285,7 @@ <h2>scrollable-vertical</h2>
         </div>
       </pop-up>
 
-      <pop-up halign="right" valign="top">
+      <pop-up halign="right" valign="bottom">
         <core-icon-button class="control" icon="more-vert"></core-icon-button>
         <div class="popup" layout horizontal center-center>
           <h2>Hello World!</h2>