fixedHeader uses position:absolute instead of fixed?

s427

I'm trying to use the fixedHeader extension on an existing table using DT in ajax mode (I don't know whether this affects how fixedHeader works).

My problem is that when I start scrolling the page, the fixed header is not visible. I inspected the DOM and found that the fixed header is indeed created (as a direct child of the body element), BUT it has the class "fixedHeader-locked", which is defined with the rule "position: absolute !important". The element itself has "top: 157px" as inline styling (this does not change when I scroll more).

So the fixed header is actually positioned absolutely, which means it's not "fixed" at all but scrolls with the page, which explains why it's not visible: it's simply out of the screen (above the top).

If I add the following rule to my CSS, then it behaves as expected:

table.fixedHeader-locked {
    position: fixed !important;
    top: 0 !important;
}

But I feel I'm missing something important and maybe incorrectly using something...

I tried inspecting the DOM of the example given by the official docs (https://datatables.net/extensions/fixedheader/examples/options/enable-disable.html) and found that this one uses the class "fixedHeader-floating" (and NOT "fixedHeader-locked"). fixedHeader-locked is defined as "position: fixed !important", which makes a lot more sense and which would work in my case.

So my question is: what makes fixedHeader apply this "fixedHeader-locked" class in my case, and how can I get it to use the "fixedHeader-floating" class?

The HTML code of my page is rather simple, although unfortunately I can't link to it (it's behind a login form). I don't see any "overflow" property being applied to any parent of the table, for instance. I don't know if there's something else I should be looking for.