Question

如何相对于浏览器窗口而不是文档定义元素的位置（左上角的坐标）？

交叉浏览器兼容，纯粹的javascript。

Answer 1

我猜你在谈论'固定位置'元素，当你滚动它时，它会停留在窗口的同一个位置？

这可以使用普通的CSS来完成，而应该，因为让浏览器执行它比使用JavaScript管理更顺畅。如果你需要在IE6上保持固定元素，你只需要JS备份，这不支持这个;只要你处于标准模式（你应该是），新版本就可以使用CSS。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
    <style type="text/css">
       #foo {
           position: fixed;
           left: 100px; top: 100px; width: 200px; height: 200px;
           background: red;
       }
    </style>
</head>
<!--[if lt IE 7]><body class="browser=ie6"><![endif]-->
<!--[if gte IE 7]><!--><body><!--<![endif]-->

    <div id="foo">Hello</div>

    <script type="text/javascript">
        if (document.body.className=='browser=ie6') {

            // Simple fallback `position: fixed` support for IE6. Elements to be fixed
            // must be positioned with `px` values for `left` and `top`.
            //
            function PositionFixer(element) {
                var x= parseInt(foo.currentStyle.left, 10);
                var y= parseInt(foo.currentStyle.top, 10);
                function fixposition() {
                    foo.style.left= x+document.documentElement.scrollLeft+'px';
                    foo.style.top= y+document.documentElement.scrollTop+'px';
                }
                window.attachEvent('onscroll', fixposition);
                fixposition();
                foo.style.position= 'absolute';
            }

            PositionFixer(document.getElementById('foo'));
        }
    </script>
</body></html>

Answer 2

无法完成AFAIK。当前文档的视口是唯一可以相对定位的东西。

您可以使用screen.availHeight属性找到屏幕的可用空间，但这不会为您提供浏览器左上角和文档左上角之间的空间（这就是你需要的。）

Answer 3

浏览器窗口中的元素位置=（文档中的元素位置） - （金额文档已滚动）

查找元素相对于文档的位置：http://www.quirksmode.org/js/findpos.html

金额文档已滚动：http://www.quirksmode.org/dom/w3c_cssom.html#t35（scrollLeft / scrollTop）

定义元素相对于浏览器窗口的位置

3 个答案: