What does top mean in html5-Front-end Q&A-php.cn

What does top mean in html5

WBOY

Release： 2021-12-23 16:57:20

Original

9642 people have browsed it

top in html5 means "top" and "distance from top". The top attribute is used to specify the top edge of the element. It can also be used to set the offset between the upper outer boundary of the positioned element and the upper boundary of its containing block. Shift, the syntax is "" or "Object.style.top=value". <element style="top:值">

What does top mean in html5

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

#What does top mean in html5

The top attribute specifies the top edge of the element. This property defines the offset between the top margin boundary of a positioned element and the top boundary of its containing block.

Note: If the value of the "position" attribute is "static", then setting the "top" attribute will have no effect.

For static elements, it is auto; for length values, it is the corresponding absolute length; for percentage values, it is the specified value; otherwise, it is auto.

For relative definition elements, if top and bottom are both auto, their calculated values are both 0; if one of them is auto, the opposite of the other value is taken; if neither is auto, bottom will be the inverse of top's value.

The syntax is:

<element style="top:值">

Copy after login

The top attribute sets the offset between the top margin boundary of a positioned element and the top boundary of its containing block.

The syntax is:

Object.style.top=auto|%|length

Copy after login

The example is as follows:

<html>
<head>
<style type="text/css">
input
{
position:absolute;
}
</style>
<script type="text/javascript">
function setTopEdge()
{
document.getElementById("b1").style.top="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setTopEdge()"
value="Set top edge to 100 px" />
</body>
</html>

Copy after login

Output result:

What does top mean in html5

Recommended tutorial: "html video tutorial"

The above is the detailed content of What does top mean in html5. For more information, please follow other related articles on the PHP Chinese website!