position CSS屬性指定元素如何定位。
下表為此屬性的用法說明和版本歷史記錄,以及該屬性在javascript腳本中的使用語法。
默認(rèn)值: | static |
---|---|
適用于: | 所有元素 |
繼承: | 沒有 |
可動(dòng)畫制作: | 否。請(qǐng)參見 動(dòng)畫屬性。 |
版本: | CSS 2、3 |
JavaScript 語法: | object.style.position="absolute" |
提示:元素position以外的元素static被稱為放置。它們?cè)诙询B環(huán)境中的垂直位置由z-index屬性決定。
該屬性的語法如下:
position: static | relative | absolute | fixed | sticky | initial | inherit
下面的示例演示了如何使用position屬性。
h1 { position: absolute; top: 100px; left: 150px; }測(cè)試看看?/?
注意: 對(duì)于打印媒體類型,該框呈現(xiàn)在每個(gè)頁面上,并且相對(duì)于頁面框是固定的,即使頁面是通過一個(gè)視口看到的(例如,在“打印預(yù)覽”的情況下)。
下表描述了此屬性的值。
值 | 描述 |
---|---|
static | 該元素的盒子是一個(gè)正常的盒子,按照正常的流程布局。對(duì)于靜態(tài)框,top,right,bottom,left,和z-index屬性將被忽略。這是默認(rèn)值。 |
relative | 元素相對(duì)于其正常位置(這稱為正常流中的位置)定位。 |
absolute | 元素相對(duì)于其位置不是靜態(tài)的其第一祖先元素定位。 |
fixed | 該元素相對(duì)于屏幕的視口是固定的,并且在滾動(dòng)時(shí)不會(huì)移動(dòng)。打印時(shí),元素將打印在每一頁上。 |
sticky | 該元素的位置類似于相對(duì)放置的框,并且“粘貼”到其最近的具有“滾動(dòng)機(jī)制”的祖先。 |
initial | 將此屬性設(shè)置為其默認(rèn)值。 |
inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素position的屬性值。 |
position屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號(hào);所有主流瀏覽器均支持該屬性。
![]() |
|