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:

 position: relative;
 text-align: center;
 padding: 1em;
 background: #eee;
width: 500px

 position: absolute;
 bottom: 100%;
 right: 0;
 line-height: 1.5em;
 background: #444;
 color: #fff;
 padding: .625em

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


Leave a Reply

Your email address will not be published. Required fields are marked *