Positioning with CSS: child element above its parent element

How can we display these two div elements? Here, the parent element is displayed below its child element.

The trick is that the child element is defined with an absolute position, and so its parent element gets a relative position:

Here is the code:

<style>
.parent{
 position: relative;
 text-align: center;
 padding: 1em;
 background: #eee;
width: 500px
 }

.child{
 position: absolute;
 bottom: 100%;
 right: 0;
 line-height: 1.5em;
 background: #444;
 color: #fff;
 padding: .625em
 }
</style>

<div class="parent">Parent<div class="child">Child</div></div>