absolute定位的元素怎么会影响整个页面的高度设置

Question

这是整个页面的布局（打码略多..抱歉）

红框中是一个iframe，整个页面的高度是通过js计算的。

遇到的问题是，
页面遇到刷新或者resize操作，有一定几率会导致整个页面上移，由于设置了overflow:hidden，所以顶栏无法操作。

排查后发现是因为右下角的盒子绝对定位，同时设置了负bottom值造成的：

问题是：

我把absolute改为fixed之后解决了这个问题（没复现了），但不清楚原理是什么？

absolute和fixed不是都会脱离文档流吗？为什么会影响高度计算？

这是高度计算的代码（不是我写的）：

// ------页面高度 start
    var $win = $(window), // 用于页面高度和哈希值监听
        $body = $('body'),
        $fnCTop = $('#fnCTop'),
        $fnCNav = $('#fnCNav'),
        $fnMainBox = $('#fnMainBox'),
        TOPNAVH = $fnCTop.outerHeight() + $fnCNav.outerHeight();

    function setMainBoxHeight() {
        $fnMainBox.outerHeight($win.height() - TOPNAVH).find('#fnSidebar').outerHeight($win.height() - TOPNAVH - 90);
    }
    setMainBoxHeight();
    $win.resize(function (event) {
        setMainBoxHeight();
    });
    // ------页面高度 end

希望可以解答我的疑惑。感谢。

另外如果我描述不清，可以评论补充，请不要点反对。

嘛，也可以点反对啦，不过也请评论告诉理由...怕了怕了。

Answer 1

fixed的定位是相对于浏览器窗口，absolute的定位是相对于距离当前元素最近的有设置position属性的父元素