我们已经说尽位置信息

在一次波纹效果的实现中，由于需要使用很多HTML的位置信息，在回顾MDN时，才意识到关于HTML的位置信息竟有如此之多的参数，因此，我决定将这些位置信息参数的含义做个总结，以便日后查询。

Element是最通用的基类，一个DOM结构中所有的对象都是继承于它。

我们现在介绍关于DOM中的几个常用类。

1. Window：Element提供了在Window中任意位置定位的唯一方法。

2. Document：Document表示整个文档（不仅仅是可视部分），除了Window.top和Window.self以外，每一个Window都有其自己的Document。

3. OffsetParent：是包含该元素并被定义了position属性的第一个元素，除了以下条件：static、table、table-cell、table-caption、body、html。

4. Page：有用的信息包括：

• pageX：元素相对于Page左上角的水平位置。

• pageY：元素相对于Page左上角的垂直位置。

• pageXOffset：从最左侧的边缘到Page左上角的水平距离。

• pageYOffset：从最上方的边缘到Page左上角的垂直距离。

5. Viewport：有用的信息包括：

• clientX：相对于Viewport左上角的水平位置。

• clientY：相对于Viewport左上角的垂直位置。

• clientWidth：Viewport的水平尺寸。

• clientHeight：Viewport的垂直尺寸。

6. Client：有用的信息包括：

• clientTop：相对于Client左边距的顶部边缘的垂直距离。

• clientLeft：相对于Client顶边距的左边缘的水平距离。

7. Screen：有用的信息包括：

• screenX：相对于Screen左上角的水平位置。

• screenY：相对于Screen左上角的垂直位置。

• screenLeft：屏幕左边缘相对于Window左边缘的水平距离。

• screenTop：屏幕顶边缘相对于Window顶边缘的垂直距离。

• scrollX：相对于Screen的顶端的水平滚动。

• scrollY：相对于Screen顶端的垂直滚动。

8. Positioned：它可以被定位到一个不同的位置。定位的元素相对于其定位的最近祖先元素。

9. Absolute：用于将元素绝对定位。

10. Relative：使元素相对于其正常位置移动，但仍在文档流中。

11. Static：表示没有定位。

12. Fixed：可将元素固定在文档中，通常随着视口的滚动而保持固定。

13. Top：相对于其定位祖先元素的顶部边缘的垂直距离。

14. Right：相对于其定位祖先元素的右侧边缘的水平距离。

15. Bottom：相对于其定位祖先元素的底部边缘的垂直距离。

16. Left：相对于其定位祖先元素的左侧边缘的水平距离。

相信通过这篇文章，大家对于HTML中的位置信息有了更加深入的了解，希望对大家有所帮助。