Positioning with CSS: child element above its parent element

Facebooktwitterlinkedinmail

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>

 

Leave a Reply

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