韓順平_php從入門到精通_視頻教程_第19講_網站推薦_定位_學習劄記_原始碼圖解_PPT文檔整理

韓順平_php從入門到精通_視頻教程_第19講_網站推薦_定位_學習筆記_原始碼圖解_PPT文檔整理
書再多，視頻再多， 都不如自己動手寫一個項目，就會有心得。
對於開源項目，跑起來，看懂，並二次修改。模仿 -------->創新，抓核心。

CSS核心內容——定位
定位—基本概念
CSS定位(Positioning)屬性允許你對元素進行定位。Positioning屬性值：
static(預設值)：元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流/標準流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative：元素框偏離某個距離。元素仍保持其為定位前的形狀，它原本所佔的空間仍保留，從這一角度看，好像該元素仍然在文檔流/標準流一樣。
absolute：元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。
fixed：元素框的表現類似於將position設定為absolute,不過其包含塊是視窗本身。

這幾個定位，真正要搞明白，並不是特別容易的事情，藉助案例來明白。
常見的定位有四種
1.stacit 定位(預設值)
2.relative相對定位（相對誰）
3.absolute 絕對位置（相對於誰參照呢）
4.fixed固定定位

（1）靜態定位不講了，前面講的都是靜態定位。

（2）定位——相對定位:relative

內容2雖然脫離了它原有的文檔流，但是它的位置不希望被別人佔用。我走了，但是位置還是我的， 停薪留職。

改變內容2位置
relative相對誰呢，相對它原先應該在的位置，進行重新置放。

這裡我們可以看出，所謂相對定位是指，相對該元素應當顯示的左上方重新置放，雖然它脫離了標準流，但是它的空間，不能被佔用。

relative.html

relative 相對定位內容1內容2內容3內容4

relative.css

.div1{width: 70px;height: 30px;background: silver;float: left;margin-left: 5px;}#spe{position: relative;left: 40px;top: 100px;}

（3）定位——絕對位置absolute

===

從看， 所謂絕對位置是指，對該元素最近的那個脫離了標準流的元素定位，如果沒有父元素（或者有父元素，但是父元素沒有脫離標準流），則相對body左上方定位。

絕對位置，究竟是對哪個點定位。

absolute.html

絕對位置內容1內容2內容3內容4

absolute.css

*{margin: 0px;padding: 0px;}.div1{width: 70px;height: 30px;background: silver;float: left;margin-left: 5px;}#spe{position: absolute; /*絕對位置(究竟對誰)*/left: 40px; /*left為正，則向右移動*/top: 100px; /*top為正，則向下移動*/}

用一個div把內容2包起來，重點講解“對該元素最近的那個脫離了標準流的元素定位”

absolute2.html

絕對位置2內容1內容3內容4測試內容2

absolute2.css

*{margin: 0px;padding: 0px;}.div1{width: 70px;height: 30px;background: silver;float: left;margin-left: 5px;}#spe{position: absolute;/*絕對位置(究竟對誰)*/left: 40px; /*left為正，則向右移動*/top: 100px; /*top為正，則向下移動*/}.div2{width: 200px;height: 150px;background: pink;float: left;}

（1）把內容2被div2包起來，並把原來的內容2刪除，則如所示，代碼如上。因為div2還是標準流，所以內容2還是相對body左上方定位。

（2）讓div2脫離標準流，則顯示如所示。那麼內容2不再按照body來定位，而是按照包含它的div2來進行定位，因為div2是距離內容2最近的脫離了標準流的元素。“對該元素最近的那個脫離了標準流的元素定位”

相應的div2的css屬性修改如下

.div2{position: relative;left: 100px;top: 100px;width: 200px;height: 150px;background: pink;float: left;}

動手操作就明白。



（4）定位——fixed定位（絕絕對對）
把內容2修改為絕對位置，則顯示如所示。不管誰包我還是不包我，我永遠對視窗的左上方，body的左上方定位，絕絕對對。

相應的內容2的css屬性修改如下

#spe{/*position: absolute;*/ /*絕對位置(究竟對誰)*/position: fixed;left: 40px; /*left為正，則向右移動*/top: 100px; /*top為正，則向下移動*/}

所謂fixed定位就是不管怎樣，總是以視窗的左上方定位。


注意：left和top對static沒有效果的，★★★static靜態定位的左右移動用的margin★★★


z-index
設定對象的層疊順序

z-index的值越小，越在下面

用於設定對象（div）顯示時候，層疊的屬性，z-index值越小，則越在下層顯示。

韓順平_php從入門到精通_視頻教程_學習筆記_原始碼圖解_PPT文檔整理_目錄

