CSS 属性

当position属性设置为absolute、fixed、relative或sticky时，top CSS属性用于指定元素相对于其包含元素的垂直位置。

注意:top属性仅当position属性设置为static（默认值）以外的值时才有效。

根据position属性的值，确定top属性的效果。

位置值Bottom 属性
absolute or fixed指定元素上边缘与外边缘之间的距离margin 和容器顶部边缘的内边框。
relative指定元素顶部边缘移动到其正常位置以下的距离。
sticky用于计算粘性约束矩形。
static对元素的位置没有影响。

当同时指定顶部和底部值时，会考虑顶部和底部值，位置设置为绝对或固定，高度为 100% 或自动。

当高度受到约束或位置设置为相对时，顶部值优先，底部值被忽略。

属性值

  • <length>: 可以指定负值、空值或正值。

  • <percentage>: 容器高度的百分比。

  • auto: 默认值。浏览器计算底部位置。

适用范围

所有 HTML 定位元素。

DOM 语法

object.style.top = "20px";

CSS position:absolute

这里是一个例子，我们设置position:absolute和不同的top属性值(auto,percent,length) -

<html>
<head>
<style>  
   div {
      position: absolute;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:absolute top:auto</div>
   <div class="percent">Position:absolute top:30%</div>
   <div class="length">Position:absolute top:3inches</div>
</body>
</html>

CSS top: 相对位置

这是一个示例，其中位置:相对和不同的顶部属性值（auto，%，length） -

<html>
<head>
<style>  
   div {
      position: relative;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:relative top:auto</div>
   <div class="percent">Position:relative top:30%</div>
   <div class="length">Position:relative top:3inches</div>
</body>
</html>

CSS top: 固定位置

这里是一个例子，我们设置position:fixed和不同的top属性值(auto,percent,length) -

<html>
<head>
<style>  
   div {
      position: fixed;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:fixed top:auto</div>
   <div class="percent">Position:fixed top:30%</div>
   <div class="length">Position:fixed top:3inches</div>
</body>
</html>

CSS position: sticky 

这里是一个例子，其中position:sticky和不同的顶部属性值（auto，percent，length） -

<html>
<head>
<style>  
   div {
      position: sticky;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:sticky top:auto</div>
   <div class="percent">Position:sticky top:30%</div>
   <div class="length">Position:sticky top:3inches</div>
</body>
</html>

CSS top: 静态位置

这里是一个示例，其中position:static和不同的顶部属性值（auto，percent ，length）-

<html>
<head>
<style>  
   div {
      position: static;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      bottom:auto;
      background-color: yellow;
   }
   div.percent {
      bottom:30%;
      background-color: pink;
   }
   div.length {
      bottom:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:static top:auto</div>
   <div class="percent">Position:static top:30%</div>
   <div class="length">Position:static top:3inches</div>
</body>
</html>