当前位置:Gxlcms > html代码 > 页面位置top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight_html/css_WEB-ITnose

页面位置top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:48人阅读

1.top

此属性仅仅在对象的定位(position)属性被设置时可用。否则,此属性设置会被忽略。

代码如下:

测试top



上面是一个段落P包含在一个DIV内,可以看到P的top设置为-5px后,它的上边距超过了容器DIV的上边距,超过的这段距离就是设置的5px。

需要注意的是,DIV和P这一对包含元素,都需要设置position为absolute才能得到想要的结果,假如父元素不设置,则子元素的参照将是更上层定义过position的元素,直到整个文档;

2.posTop

posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而posTop只是一个数值,一般使用posTop来进行运算。

3.scrollTop

代码如下:



这里是文本



输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为100+150=250。

人气教程排行