Can you relativlely or absolutely position items in a display:table-cell?

Question

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

Answer 1

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;
  }

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

Answer 2

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">
    <div class="relative-div">
        <div class="absolute-el">
            <img ... >
        </div>
    </div>
</div>

Answer 3

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: