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