Home > Web Front-end > CSS Tutorial > What does top mean in css

What does top mean in css

WBOY
Release: 2021-12-10 15:12:21
Original
8943 people have browsed it

In CSS, top means "top" and "distance from the top". The top attribute is used together with the position attribute to set the distance from the top of the positioned element. The top attribute can define the offset between the top margin boundary of a positioned element and the upper boundary of its containing block. The top attribute only works on positioned elements.

What does top mean in css

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

What does top mean in css

In css, top means "top", and the top attribute is used to set positioning elements The distance from the top.

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.

The syntax is as follows:

position:absolute; //这个是必须的,top和left才能起作用
top: 10px; //距离顶部10像素,就是想下面移动10像素
Copy after login

The example is as follows:

<html>
<head>
<style type="text/css">
img{
position:absolute;
top:30px;
}
</style>
</head>
<body>
<img  src="1115.08.png" / alt="What does top mean in css" >
<h1>This is a heading</h1>
</body>
</html>
Copy after login

Output result:

What does top mean in css

(Learning video Share: css video tutorial)

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

Related labels:
css
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