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>

列印頁面