?
This document uses PHP Chinese website manual Release
語法:
top: auto | <length> | <percentage>
默認值:auto
適用于:定位元素。即定義了position為非static的元素
繼承性:無
動畫性:當值為<length> | <percentage>時
計算值:當position為static時,計算值是auto。
為relative時,如果top和bottom都是auto,則它們的計算值是0;如果top和bottom其中一個為auto,則auto相當于另一個的負值,即top = -bottom;如果top和bottom的值都不為auto,則忽略bottom。
否則在其它情況下,當指定值為<length>時,計算值為指定值,當指定值為<percentage>時,計算值為計算后的絕對值。除去這些情況,都為auto
媒體:視覺
取值:
auto:無特殊定位,根據(jù)HTML定位規(guī)則在文檔流中分配
<length>:用長度值來定義距離頂部的偏移量??梢詾樨撝?。
<percentage>:用百分比來定義距離頂部的偏移量。百分比參照包含塊的高度。可以為負值。
說明:
檢索或設(shè)置對象參照相對物頂邊界向下偏移位置。
該屬性用來指定盒子參照相對物頂邊界向下偏移。相對定位元素的相對物是自身,絕對定位和居中定位元素是從包含塊的padding邊界開始計算偏移值
對應(yīng)的腳本特性為top。
兼容性:
在IE6及以前的版本下,如果top和bottom都定義了非auto的值,那么 bottom 的計算值將會被設(shè)置為 -top (無論是否顯式的定義了 height 或 max-height),它的指定值將被忽略,說白了,你將無法在不指定某個元素高度的情況,通過給元素指定top和bottom的方式來進行高度拉伸;
示例:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>top_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { position: absolute; top: -100px; width: 200px; height: 200px; padding: 5px 10px; background: #c00; color: #fff; line-height: 12; } </style> </head> <body> <div class="test">我將出現(xiàn)在瀏覽器頂部</div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例