What does top mean in html5

WBOY
Release: 2021-12-23 16:57:20
Original
9583 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!