CSS的六種定位模型

css支援6種定位模型

設定了位置的元素是原子顯示的,這意味著它的靜態後代元素,行內內容和背景之間不可能出現外部元素.通過使用相對定位,絕對定位和固定定位模式,就可以將元素設定為原子顯示,設定為overflow:scroll|auto的塊級元素也是原子顯示的

而沒設定位置的靜態塊級,當發生重疊時,他們的行內內容不會重疊,但是他們的邊框和背景會發生重疊,但文字不會.

適用於所有元素,預設auto

position:static;預設是static;

position:absolute;

div

對於靜態行內元素,如em,strong,span等,但是不包括行內可替換元素(input,img,textarea等),使用絕對定位模式absolute時,width和right可以使用為了要居中,需要額外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.

注意,這裡left和right必須是0才行.

#em

position:fixed;可以將任意元素變為固定位置元素

position:relative;

使用float:left;和float:right;可以使元素離開常規流.

使用float可以使一些元素成為浮動元素,通過relative可以浮動元素設定為相對定位,相對浮動元素仍然位於浮動元素所在的常規流中,可以使用left和top設定它在流中的偏移位置.