Can You Relativlely Or Absolutely Position Items In A Display:table-cell?

I have a link that I want to always be at the bottom right of the cell it is in. Right now the link is in a < p > element. I tried doing both absolutely and relative position

Solution 1:

While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.

So the child element will be relative to its parent element.

EDITED:

Working JS Fiddle in Chrome, Safari, Opera and IE

But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.

See the reference:

Solution 2:

Edited: Sorry..!! Missed it :). As said by ahsaan, Add position relative to .layout-cell and modify your HTML as below.

 .layout-cell {
    display: table-cell;
    vertical-align: top;
    position: relative;
 }

 .layout-cell div{
   position:absolute;
   bottom:0;
   right:0;
  }

<divclass="layout-cell columnBody-wrapper curvedBottom"><p>Column 3</p><div><aclass="button button"href="#">Learn More</a></div></div>

Solution 3:

Expanding on Ahsan Rathod's answer to solve this issue in firefox wrap your content inside a div and set your properties on this div rather than the div set as display table-cell

.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}

<div class="cell-div">
    <divclass="relative-div"><divclass="absolute-el"><img... ></div></div></div>