CSS top property

CSS 中的 top 属性用于指定垂直定位元素的顶部位置。它不会影响非定位元素。它是四个偏移属性 left, right 和 bottom 之一。

此属性的效果取决于相应元素的定位方式，即 position 属性的值。当 position 属性设置为 static 时，top 属性无效。

此属性对 **static（静态）** 值以外的定位元素的效果如下：

• 当元素为绝对定位或固定定位时（即 position: absolute; 和 position: fixed;），top 属性指定元素顶部边缘与其包含块（元素相对定位到的祖先元素）顶部边缘之间的距离。
• 如果元素是相对定位（即 position: relative;），则 top 属性将元素顶部边缘从其正常位置向上/向下移动。
• 如果 position 设置为 sticky （即 position: sticky;），则定位上下文是视口。当元素在视口内时，top 属性的行为类似于其位置是相对的。当元素在视口外时，top 属性的行为类似于其位置是固定的。

语法

属性值

此属性的值定义如下：

auto: 这是默认值。它允许浏览器计算顶部边缘的位置。

length: 此值以 px, cm, pt 等定义 top 属性的位置。它允许负值。

percentage: 此值以百分比 (%) 定义 top 属性的位置。它是根据元素包含块的高度计算的。它也允许负值。

**初始：**它将属性设置为其默认值。

inherit： 它继承父元素的属性。

现在，让我们通过一些例子来理解这个属性。

示例 - 使用负值

在此示例中，有四个相对定位的 div 元素。我们对它们应用了具有负值的 top 属性。这里，top 属性的负长度值以 px 和 em 定义。

输出

示例

在此示例中，有四个绝对定位（即 position: absolute;）的 div 元素。我们对它们应用了 top 属性。具有 top: initial; 和 top: auto; 的 div 元素将因具有相似的尺寸和默认值而重叠。这里，top 属性的长度以 px 和 % 定义。

输出