0

全部

我对元素的位置感到困惑。让我从如何获取/设置元素的左属性开始。

首先，有一种设置元素左侧位置的方法，使用 element.style.left。我将定义从http://www.w3schools.com/cssref/pr_pos_left.asp复制到下面：

  1. 对于绝对定位的元素，left 属性将元素的左边缘设置为其包含元素左边缘的左/右单位。
  2. 对于相对定位的元素，left 属性将元素的左边缘设置为向左/向右到其正常位置的单位。

所以我的问题是：

  1. 在定义 1 中，包含元素是否等于 element.parentNode？
  2. 在定义 2 中，如何获得元素的正常位置？

其次，我们可以通过element.offsetLeft来获取左边的位置。如果我尝试这种方式，我应该知道哪个元素是元素的 offsetParent。我还从下面的互联网复制了我的定义：

  • offsetParent 属性是指最近的定位（非静态）祖先元素。如果没有这样的元素，offsetParent 将引用 body 元素

我编写了一个测试 Html 文件并尝试获取 offsetParent。

    <div id="div_1">
        <p id="p_1">
            Lorum ipsum...
        </p>
    </div>

    <div id="div_2" style="position: relative;">
        <p id="p_2">
            Lorum ipsum...
        </p>
    </div>
    <table id="table_1">
        <th>
        <tr>
            <td id="td_1">Cell</td>
            <td>Cell</td>
        </tr></th>
    </table>

元素 p_1 的 offsetParent 是 body，元素 p_2 的 offsetParent 是 div_2，到目前为止，一切都很好。但是我尝试获取元素td_1的offsetParent，结果是table_1，而不是body。为什么？根据定义，我认为应该是doby，因为没有最近的定位（非静态）祖先元素。

嗨，claustrofob，感谢您的重播，我想您已经回答了我的部分问题，关于为什么 td 的 offsetParent 是表。但是根据您关于 style.left 的另一个答案，我不同意。我写了一个新的测试文件，下面是片段：

    <div id="div_2" style="border:2px solid red; width: 500; height: 300;position: relative;">
        <div  id="div_3" style="border:2px solid blue;left:100px; width: 300; height: 100;">
            <p id="p_2" style="position: relative;left: 30px">
                Lorum ipsum...
            </p>                
        </div>
    </div>

    <script>
        var p_2 = document.getElementById('p_2');
        document.write("<div>The position property of Element p_2 is "+ p_2.style.position +"</div>")
        document.write("<div>The style.left of Element p_2 is "+ p_2.style.left +"</div>")
        document.write("<div>The offsetParent of Element p_2 is "+ p_2.offsetParent.id +"</div>")
        document.write("<div>The offsetLeft of Element p_2 is "+ p_2.offsetLeft +"</div>")
        document.write("<br/>")
        var div_3 = document.getElementById('div_3');
        document.write("<div>The position property of Element div_3 is "+ (div_3.style.position ? div_3.style.position : 'not defined') +"</div>")
        document.write("<div>The style.left of Element div_3 is "+ div_3.style.left +"</div>")
        document.write("<div>The offsetParent of Element div_3 is "+ div_3.offsetParent.id +"</div>")
        document.write("<div>The offsetLeft of Element div_3 is "+ div_3.offsetLeft +"</div>")          
    </script>

输出是：

元素 p_2 的位置属性是相对的

Element p_2 的 style.left 为 30px

Element p_2 的 offsetParent 是 div_2

Element p_2 的 offsetLeft 为 30

元素 div_3 的 position 属性未定义

Element div_3 的 style.left 为 100px

Element div_3 的 offsetParent 是 div_2

Element div_3 的 offsetLeft 为 0

如果你关注关于元素 div_3 的输出，你可以明显地发现 style.left 不等于从元素到 element.offsetParent 的距离。

4

1 回答 1

0

对于相对定位的元素，顶部/左侧坐标定义与其正常位置的偏移量。这意味着具有下一个样式属性的元素：

{
   position: relative;
   top: 0;
   left: 0;
}

将保持在原来的位置。更改顶部/左侧将从该位置移动元素。

对于绝对定位的元素，top/left 使用相对或绝对位置定义距最近父级的偏移量。你可以把它想象成绝对或相对定位的元素为它的子元素定义了一个新的原点。顶级原点是您的身体元素。

于 2013-05-28T11:30:31.203 回答