CSS top 屬性 · W3School CSS 參考手冊

# CSS top 屬性 ## 實例把圖像的上邊緣設置在其包含元素上邊緣之下 5 像素高的位置： ``` img { position:absolute; top:5px; } ``` ## 瀏覽器支持所有主流瀏覽器都支持 top 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 top 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。注釋：如果 "position" 屬性的值為 "static"，那么設置 "top" 屬性不會產生任何效果。 ### 說明對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。對于相對定義元素，如果 top 和 bottom 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數；如果二者都不是 auto，bottom 將取 top 值的相反數。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.top="50px" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | auto | 默認值。通過瀏覽器計算上邊緣的位置。 | | _%_ | 設置以包含元素的百分比計的上邊位置。可使用負值。 | | _length_ | 使用 px、cm 等單位設置元素的上邊位置。可使用負值。 | | inherit | 規定應該從父元素繼承 top 屬性的值。 | ## TIY 實例 [使用固定值設置圖像的上邊緣](/tiy/t.asp?f=csse_position_top) 本例演示如何使用固定值設置圖像的上邊緣。 ``` <html> <head> <style type="text/css"> img { position:absolute; top:0px } </style> </head> <body> <h1>This is a Heading</h1> <img class="normal" src="/i/eg_smile.gif" /> <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p> </body> </html> ``` [使用百分比設置圖像的上邊緣](/tiy/t.asp?f=csse_position_top_percent) 本例演示如何使用百分比值設置圖像的上邊緣。 ``` <html> <head> <style type="text/css"> img { position:absolute; top:5% } </style> </head> <body> <h1>這是標題</h1> <img class="normal" src="/i/eg_smile.gif" /> <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)") HTML DOM 參考手冊：[top 屬性](/jsref/prop_style_top.asp "HTML DOM top 屬性")