CSS层模型
參考：慕課網(wǎng) 點此可進
如何讓html元素在網(wǎng)頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
絕對定位
需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊（下文的組合使用）進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>absolute</title> <style type="text/css"> div{width:200px;height:200px;border:2px red solid;position:absolute;left:50px;top:150px; } </style> </head> <body> <div id="div1"></div> </body> </html>結(jié)果圖如下：
相對定位
需要設(shè)置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative樣式</title> <style type="text/css"> #div1{width:200px;height:200px;border:2px red solid;position:relative;left:50px;top:150px; }</style> </head> <body><div id="div1"></div><span>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</span> </body> </html>結(jié)果圖如下：
雖然div元素相對于以前的位置產(chǎn)生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。
?
固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative樣式</title> <style type="text/css"> #div1{width:200px;height:200px;border:2px red solid;position:fixed;bottom:0;left:50px;}</style> </head> <body><div id="div1"></div><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p<p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p<p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p><p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p> </body> </html>?
結(jié)果圖如下：
當滾動下拉框時，紅色框并不會隨著滾動而滾動。這應(yīng)該就是那些小廣告啊，二維碼啊之類的設(shè)計方法
?
Relative與Absolute組合使用
使用position:absolute可以實現(xiàn)被設(shè)置元素相對于瀏覽器（body）設(shè)置定位以后，如何設(shè)置相對于其它元素進行定位？這就得使用position:relative來幫忙，但是必須遵守下面規(guī)范：
1、參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"><!--參照定位的元素--><div id="box2">相對參照元素進行定位</div><!--相對定位元素--> </div>從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
#box1{width:200px;height:200px;position:relative; }3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
#box2{position:absolute;top:20px;left:30px; }這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。
?
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>相對參照元素進行定位</title> <style type="text/css"> div{border:2px red solid;} #box1{width:200px;height:200px;position:relative;} #box2{position:absolute;top:20px;left:30px;} /*下面是任務(wù)部分*/ #box3{width:200px;height:200px;position:relative;} #box4{width:99%;position:absolute; bottom:0px;left:0px; } </style> </head><body> <div id="box1"><div id="box2">相對參照元素進行定位</div> </div><h1>下面是任務(wù)部分</h1> <div id="box3"><img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg"><div id="box4">當我還是三年級的學生時是一個害羞的小女生。</div> </div> </body> </html>結(jié)果圖如下：
Relative與Absolute組合使用還是很有用處的,另外還是很喜歡這個害羞的女生啊！
轉(zhuǎn)載于:https://www.cnblogs.com/zhaoww/p/5839665.html
總結(jié)
- 上一篇： 【Python之路Day17】Pytho
- 下一篇： fir.im Weekly - 做一款