css 中 top 屬性可以將元素相對于其父元素的上邊緣垂直移動,可使用 length、percentage 或 auto 指定偏移量。length 為數值長度,percentage 為百分比偏移量,auto 由瀏覽器自動計算。top 僅適用于具有定位的元素,元素的上邊緣會受到外邊距框或內容框的影響。
CSS 中 top 屬性
top 屬性的作用
top 屬性用于設置元素相對于其父元素的上邊緣的偏移量。它可以將元素在垂直方向上向上或向下移動。
使用語法
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">top: <length> | <percentage> | auto;</percentage></length></code>
登錄后復制
屬性值
<length></length>
:一個指定偏移量長度的數值,例如 “5px” 或 “1em”。
<percentage></percentage>
:一個指定偏移量百分比的數值,例如 “5%” 或 “25%”。
auto
:瀏覽器根據元素的父元素和內容自動計算偏移量。
示例
將一個元素向上移動 20px:
<code class="css">element { top: 20px; }</code>
登錄后復制
將一個元素向下移動其父元素高度的 50%:
<code class="css">element { top: 50%; }</code>
登錄后復制
注意
top 屬性僅適用于具有定位(例如 position: absolute
或 position: relative
)的元素。
當 top 屬性值為 auto
時,元素將沿其父元素的上邊緣對齊。
對于塊級元素,top 屬性會影響其外邊距框(margin box)的上邊緣。對于內聯元素,它會影響其內容框(content box)的上邊緣。
top 屬性可以與 other 屬性(如 bottom
、left
和 right
)一起使用來實現元素的精確定位。