Although your idea is on the right track, the correct approach is actually the opposite. The parent element should have position: relative, while the inner element should have position: absolute. This is because the inner element is positioned absolutely in relation to its parent (specifically, its offsetParent). By specifying position: relative on the parent, it becomes the offsetParent for all of its child elements.
For the top-left corner of the parent element to align with the bottom-right corner of the absolutely positioned child, you should include right: 100%; bottom: 100% in the child's CSS. This will place the child <100% of the parent's width> from the right edge of the parent, and <100% of the parent's height> from the bottom.
HTML
<div class=outer-box>
The Button
<div class=inner-box>
</div>
</div>
CSS
.outer-box {
position: relative;
}
.inner-box {
position: absolute;
/* align bottom-right with offsetParent's top-left */
bottom: 100%;
right: 100%;
width: 100px; /* fixed width, else contents will shrink */
}
You can also view a jsFiddle demonstration here: http://jsfiddle.net/ryanartecona/g344W/2/
Once you have achieved alignment, you may consider adding another box inside the .inner-box and giving it a position: relative to make any necessary position adjustments, such as sliding it a fixed distance over the button, etc.