如何获取元素距离页面顶部的高度？

1、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。

2、在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。

3、得到的结果是一个数组对象，只要获取里面的top数据就行了。

4、使用log方法，把数据输出到浏览器的控制台。

5、运行页面，看到现在的按钮位置。距离顶部估计是500px左右吧，点击一下这个按钮。

6、然后看一下控制台上的数据，得到距离为439的像素。

很多站长朋友们都不太清楚html怎么调盒子大小，今天小编就来给大家整理html怎么调盒子大小，希望对各位有所帮助，具体内容如下：

HTML中盒子问题！

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

1、新建一个html文件，命名为test.html，用于讲解html如何将一个div置于最上层。

2、在test.html文件内，使用div标签创建两个模块，并分别设置它们的id为testone，testtwo。

3、在css标签内，统一设置div的样式，定义它们的位置属性为绝对定位，宽度和高度为300px。

4、在css标签内，设置id为testone的样式，定义其背景颜色为红色，同时使用z-index属性定义其为最上层。

5、在css标签内，设置id为testtwo的样式，定义其背景颜色为蓝色，距离左边和距离上边的位置为20px。

6、在浏览器打开test.html文件，查看实现的效果。

---