I'm not sure which rendering is technically correct based on the spec. But I ran into this issue while developing and noticed a difference between Firefox and WebKit. The results from WebKit surprised me the most and is why I'm reporting this here. If this is actually a Firefox bug, please let me know and I will file the bug in the appropriate place. When an element has the CSS: display: table-cell; position: relative; top: Xpx; Where X is some value greater than 0, the element is renderd X pixels from the top. I am surprised by this as I would expect (intuitively; not based on a spec) table-cell display to override the relative positioning. That is, I'd expect the element to be rendered more like a table cell. Test document: <!doctype HTML> <head> <title>Test</title> <style> #row { display: table; } .cell { display: table-cell; position: relative; height: 100px; width: 100px; } #left { background-color: green; top: 50px; } #right { background-color: red; } </style> </head> <body> <div id="row"> <div id="left" class="cell"></div> <div id="right" class="cell"></div> </div> </body>
Created attachment 243453 [details] Screenshot in WebKit
Created attachment 243454 [details] Screenshot in Firefox
According to the Firefox guys, WebKit is correct, Firefox is incorrect. <https://bugzilla.mozilla.org/show_bug.cgi?id=1112750> <https://bugzilla.mozilla.org/show_bug.cgi?id=35168>