CSS - top 属性

top CSS 属性用于指定元素相对于其容器元素的垂直位置，前提是position属性设置为absolute、fixed、relative或sticky。

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

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

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

同时指定top和bottom值时，如果position设置为absolute或fixed，并且高度为100%或auto，则两个值都会生效。

如果高度受限或position设置为relative，则top值优先，bottom值将被忽略。

可能的值

<length> − 可以指定负值、零值或正值。
<percentage> − 容器高度的百分比。
auto − 默认值。浏览器计算底部位置。

应用于

所有HTML定位元素。

DOM 语法

object.style.top = "20px";

CSS top - 绝对定位

以下是一个示例，其中我们设置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 - 相对定位

以下是一个示例，其中position:relative和不同的top属性值(auto, percent, 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 top - 粘性定位

以下是一个示例，其中position:sticky和不同的top属性值(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和不同的top属性值(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>

打印页面