Search code examples
internet-explorerquirks-modecss

position: absolute to be absolute to the browser/window


It's my understanding that position: absolute is absolute to the first parent who has a non-static position. If no parent has a specified position, then it will be absolute to the browser/window.

position: fixed on the other hand will be absolute to the browser, however it does not work for IE if in quirks mode.

My problem is that I want something to be top:0; left:0; but the website is in quirks mode, and I only edit inside my personal div. (it's a user website like myspace). There are many parent divs that have position: relative.

How can I get position: absolute to act like position: fixed without the need of the object being stationary (it can be stationary if need be)?


Solution

  • early versions of IE just dont support position: fixed;

    the only thing i know of is a javacript workaround like so:

    var layerPadding = 5;
    function layerScrollFixEx() {
        if (layerGetScrollPosition() != (document.getElementById('layer').offsetTop - layerPadding)) {
            document.getElementById('layer').style.top = layerGetScrollPosition() + layerPadding + "px";
        }
    }
    
    function layerGetScrollPosition() {
        if (typeof window.pageYOffset != 'undefined') {
             return window.pageYOffset;
        }
        else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
             return document.documentElement.scrollTop;
        }
            else if (typeof document.body != 'undefined') {
             return document.body.scrollTop;
        }
    }
    layerScrollInterval = window.setInterval("layerScrollFixEx()", 1);
    

    this is a code excerpt from some code that i did a while back when this was still relevant.