CSS定位
CSS定位
position:元素定位方式,取值static、fixed、relative、absolute
static:靜態(tài)定位(預(yù)設(shè)狀態(tài)、不定位)。
Fixed:固定定位。
Relative:相對定位。
Absolute:絕對定位。
定位方式,要與定位屬性配合使用
#定位座標(biāo):指定定位的元素,偏移目標(biāo)元素多遠(yuǎn)的距離。
left:定位元素,距離目標(biāo)元素左邊的距離。
top:定位元素,距離目標(biāo)元素上邊的距離。
right:定位元素,距離目標(biāo)元素右邊的距離。
bottom:定位元素,距離目標(biāo)元素下邊的距離。
#已固定定位,position:fixed
- ##固定定位,是相對於瀏覽器視窗來進(jìn)行的定位。
- 固定定位,不佔(zhàn)空間,層級要高於普通元素。它不會隨著網(wǎng)頁的滾動而滾動。
- 如果沒有指定定位座標(biāo)的話,固定定位元素的位置在原地不動。
- 固定定位元素,一定是“塊元素”,不管原來它是什麼元素。
相對定位,position:relative;
- 相對定位,是相對於“原來的自己」進(jìn)行定位。
- 相對定位,仍佔(zhàn)空間,層級高於一般元素。
- 如果不指定定位座標(biāo)的話,相對定位元素的位置在原地不動。
- 相對定位,原來是行內(nèi)元素,定位後還是行內(nèi)元素;原來是塊元素,定位後還是塊元素。
註:相對定位和絕對定位,一般情況下是配合使用。
絕對定位,position:absolute
- 相對於祖先定位元素(相對定位,絕對定位),來進(jìn)行的定位。
- 如果它的父元素沒有進(jìn)行任何定位的話,再往上找定位元素。
- 如果一直找到<body>都沒有找到定位元素的話,那就相對於<body>來進(jìn)行定位。
- 絕對定位元素,不佔(zhàn)空間,層級要高於一般元素。
如果不指定定位座標(biāo)的話,絕對定位元素的位置在原地不動。
絕對定位元素,是一個「塊元素」。