css - `absolute` child does not relate to `relative` parent when parent is `table-cell` - only firefox -

situation

html:

<div class="container">    <div class="parent">       <div class="child">x</div>     </div> </div> 

css:

.container {    display: table; }  .parent {    display: table-cell;    position: relative; }  .child {    position: absolute;    right: 0; } 

what expect:

the .child should positioned right edge of .parent. works in chrome.

what in firefox:

the .child positioned right edge of closest "non static" parent has not display: table-cell.

fiddle

http://jsfiddle.net/syg5k/2

question

why display: table-cell influence positioning of child elements, or, why position: relative ignored on table-cell elements? can work around if rely on table-cell?

you need put position: relative; in parent.

so in code in question add position: relative; .container

or in jsfiddle add position: relative; .parent

.parent {     height: 150px;     width: 450px;     display: table;     margin-top: 400px;     background: #bbb;     position:relative; } 

related : firefox ignores absolute positioning in table cells , positioning context on table-cell element in firefox

about questioning 'why' : it's no more 'block' level element. it's table-cell positioning behave in different way (in case, firefox).

see understand deeper 'tables' behaviors

http://jsfiddle.net/syg5k/12