1窍蓝、作用:用于確定一個盒子出現(xiàn)在什么位置上
2土思、使用方式:position
3务热、CSS定位分為:普通流定位、相對定位己儒、絕對定位崎岂、固定式布局
(1)普通流定位
? ? ? ? a、position:static ?默認行為
? ? ? ? b闪湾、從上到下冲甘,從左到右,按順序以“流”的方式進行定位
? ? ? ? c途样、子元素會排列在父容器的element內部
? ? ? ? d江醇、block:獨占一行
? ? ? ? e、inline,inline_block:不換行何暇,當容器不能容納陶夜,自行換行?
(2)相對定位 ? ?
????????學習網址:http://www.w3school.com.cn/css/css_positioning_relative.asp
? ? ? ? a、position:relative ?默認行為
? ? ? ? b赖晶、在普通流的基礎上律适,進行“偏移”
? ? ? ? c、其在“普通流”中的位置遏插,仍然保留
? ? ? ? d捂贿、使用left,top ?right胳嘲,bottom進行位置調整
? ? ? ? e厂僧、理解:相當于元素在一個“私有的層”中,相當于自己原始位置進行偏移
? ? ? ? ? ? ?注意:在使用相對定位時了牛,無論是否進行移動颜屠,元素仍然占據原來的空間。因此鹰祸,移動元素會導致它覆蓋其它框甫窟。
? ? (3)絕對定位
? ? ? ? 學習網址:http://www.w3school.com.cn/css/css_positioning_absolute.asp
? ? ? ? a、position:absolute ?默認行為
? ? ? ? b蛙婴、在“普通流”中完全消失
? ? ? ? c粗井、其位置將以其所在容器的左上角為原點,進行偏移
? ? ? ? d街图、使用left浇衬,top ?right,bottom進行位置調整
? ? ? ? ·· ? Right=0px top=0px 右上角定位
? ? ? ? ? ? ?Left=0px bottom=opx 左下角定位
? ? ? ? e餐济、理解:相當于元素在一個“私有的層”中耘擂,相對于容器的左上角位置,進行偏移
? ? ? ? ? ? ? 絕對定位的框與文檔流無關絮姆,所以它們可以覆蓋頁面上的其它元素醉冤。可以通過設置?z-index 屬性來控制這些框的堆放次序滚朵。
? ? (4)固定式布局
? ? ? ? a冤灾、固定式布局就是絕對定位 ?position:fixed;
? ? ? ? b、區(qū)別:絕對定位其位置將以其所在容器的左上角為原點辕近,進行偏移
? ? ? ? ? ? ? ? ? ? ? ? 固定式布局其位置將以其所在窗口的左上角為原點韵吨,進行偏移
? ? ? ? c、相對定位實際上被看作普通流定位模型的一部分移宅,因為元素的位置相對于它在普通流中的位置归粉。
? ? ?(5)浮動
? ? ? ? 學習網址:http://www.w3school.com.cn/css/css_positioning_floating.asp
? ? ? ? a、以浮動流的方式漏峰,排列多個盒子
? ? ? ? b糠悼、flo:left/right
? ? ? ? c、在普通流中消失浅乔,普通流中的鄰居和父容器感覺不到它的存在