CODEWITHSUNDEEP
csscss-positioncss-tables
Roman
Roman

Reputation: 6418

`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 I expect:

the .child should be positioned to the right edge of .parent. Works in Chrome.

What I get in Firefox:

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

Fiddle

http://jsfiddle.net/SYG5k/2

Question

Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?

Upvotes: 2

Views: 4351

Answers (4)

Charles Wyke-Smith
Charles Wyke-Smith

Reputation: 2507

I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.

Upvotes: 0

Ron van der Heijden
Ron van der Heijden

Reputation: 15070

You need to put position: relative; in your parent.

So in the code in your question add position: relative; to .container

Or in your jsfiddle add position: relative; to .parent

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

Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox

About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).

See this to understand deeper about 'tables' behaviors

http://jsfiddle.net/SYG5k/12

Upvotes: 2

Huangism
Huangism

Reputation: 16438

Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element

http://jsfiddle.net/SYG5k/13/

<div class="rel">
    a 
    <div class="absolute">x</div>
</div>

.foo, .rel {
    position: relative;
}

This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you

Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above

Upvotes: 2

Ben
Ben

Reputation: 913

A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;

HTML:

<div class="parent">      
<div class="cell foo">
    <div class="cellInner">
        a
        <div class="absolute">x</div>
    </div>
</div>

CSS:

.cellInner{
position:relative;
width:100%;
height:100%;
}

Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/

Upvotes: 0

Related Questions