📅 最后修改于: 2023-12-03 15:31:13.627000 🧑 作者: Mango
在 HTML 中设置元素的位置和大小通常需要使用 CSS 定位属性，比如 position, top, left, right, bottom 等。其中，top 属性用于指定一个元素相对于其父元素顶部的偏移量，即距离父元素顶部的距离。
top 属性可用于绝对定位 (position: absolute) 或固定定位 (position: fixed) 的元素上。其语法如下：
top: length|percentage|auto|initial|inherit;
top 属性可接受以下值：
length: 指定一个长度值，如 px, em, rem 等。percentage: 指定一个相对于父元素高度的百分比，如 50%。auto: 默认值。元素距离其父元素顶部的位置由浏览器自行计算。initial: 将属性设置为其默认初始值。inherit: 从父元素继承该属性的值。以下是一些使用 top 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>使用 top 属性</title>
<style>
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: #ffffcc;
padding: 20px;
}
.fixed {
position: fixed;
top: 0;
background-color: #ff6666;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<!-- 绝对定位的元素 -->
<div class="absolute">
<h2>绝对定位元素的顶部偏移量是 50px</h2>
<p>这是一个绝对定位元素，其顶部距离父元素顶部的距离是 50px。</p>
</div>
<!-- 固定定位的元素 -->
<div class="fixed">
<h2>固定定位元素的顶部距离始终为 0</h2>
<p>这是一个固定定位元素，其顶部距离浏览器视口的顶部始终是 0。</p>
</div>
</body>
</html>
top 属性只适用于设置了定位属性 (position: absolute 或 position: fixed) 的元素。top 属性，又设置了 bottom 属性，则 top 属性优先级更高，即 bottom 属性会被忽略。position: relative) 元素的 top 值发生变化时，它会相对于其原来的位置进行移动。