HTML DOM Style top property
Style Objects Definition and Usage
top property sets or returns the top position of the positioning element.
This attribute specifies the top position of an element, comprising: padding, scroll bars, borders, and margins.
Tip: a positioning element is the element's position attribute is set: relative (relative), absolute (absolute) or fixed (fixed).
grammar
Set top properties:
Object.style.top="auto|length|%|inherit"
Back top properties:
Object.style.top
| 值 | 描述 |
|---|---|
| auto | 默认。通过浏览器计算顶部的位置。 |
| length | 使用 px、cm 等单位定义元素的顶边到最近一个具有定位设置父元素的顶部边缘的位置。可使用负值。 |
| % | 定义元素的顶边到最近一个具有定位设置父元素的顶部边缘的百分比位置。 |
| inherit | top 属性的值从父元素继承。 |
Browser Support
All major browsers support top property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Examples
Examples
Settings button at the top positions:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Style type = "text / css">
# B1 {
position: absolute;
}
</ Style>
<Script>
function displayResult () {
. Document.getElementById ( "b1") style.top = "100px";
}
</ Script>
</ Head>
<Body>
<Input type = "button" id = "b1" onclick = "displayResult ()" value = "is set to the top position 100 px">
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Style type = "text / css">
# B1 {
position: absolute;
}
</ Style>
<Script>
function displayResult () {
. Document.getElementById ( "b1") style.top = "100px";
}
</ Script>
</ Head>
<Body>
<Input type = "button" id = "b1" onclick = "displayResult ()" value = "is set to the top position 100 px">
</ Body>
</ Html>
try it"
Style Objects