This is a test page for a Mozilla bug. I confirmed it in Mozilla 1.1 and 1.4 for Windows, Mozilla 1.0.1 for Mac, Netscape 6.2 for both Windows and Mac, and even in ancient Gecko M17 for Windows.
When you put an absolutely positioned element inside a relatively positioned one, the absolute element should calculate its position relative to its parent. Mozilla doesn't do this when the parent element is a table.
On the example page, there are two containers, a <table> and a
<div> with position: relative. Each of them
contains a testdiv with position: absolute.
.container {
position: relative;
top: 50px;
margin-bottom: 100px;
border: 1px solid #000000;
}
td {
border: 1px solid #000000;
}
.testdiv {
position: absolute;
top: 20px;
left: 20px;
background-color: #AD007B;
color: #ffffff;
}
The testdiv elements should be positioned relative to the
container elements, not relative to the browser window.
In Explorer 6 everything is correct:
Both testdivs are positioned 50,50 pixels from the upper left corner of their container.
Mozilla, though, gives the first testdiv a position relative to the browser window. It
completely ignores the table, even though the table has position: relative.
This is obviously a bug. Oddly, it seems to be deliberate behaviour. Apparently the Mozilla engineers have been seriously asleep while coding this part of the browser.