1.CSS 定位

定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

CSS 有三種基本的定位機(jī)制：

普通流:

元素按照其在 HTML 中的位置順序決定排布的過(guò)程

浮動(dòng):

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

絕對(duì)定位:

絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

定位屬性:

position,將元素放在一個(gè)靜態(tài)的,相對(duì)的,絕對(duì)的,或固定的位置

通過(guò)對(duì) top,left,right,bottom 這四個(gè)屬性的賦值讓元素向?qū)?yīng)的方向偏移

overflow 設(shè)置元素溢出其區(qū)域發(fā)生的事情

clip 設(shè)置元素的顯示形狀,多用于圖片

vertical-align 設(shè)置元素的垂直對(duì)其方式

z-index 設(shè)置元素的堆疊順序

接下來(lái)就著重來(lái)看看 position 屬性: 為了形象,我們先建立一個(gè) html 文件和 CSS 文件

html:

<div class="position1"></div>
<p>this is php中文網(wǎng)</p>
<p>this is php中文網(wǎng)</p>
<p>this is php中文網(wǎng)</p>
<p>this is php中文網(wǎng)</p>

CSS:

.position1{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
 
}

接下來(lái)我們就可以看到普通流的效果:

當(dāng)我們?cè)?CSS 中加入 position 賦值為相對(duì)的,向左偏移 60px

 position: relative;
 left: 60px;

接下來(lái)我們會(huì)看見(jiàn):

下面我們?cè)賹?position 設(shè)置為絕對(duì)的:

position: absolute;

效果就變成了這樣:

通過(guò)比較我么就能理解 position 這兩個(gè)值的區(qū)別,還有兩個(gè)屬性就是 fixed,和 static,fixed 是將元素固定下來(lái),就算滾動(dòng)屏幕,它也會(huì)在同一個(gè)地方不會(huì)動(dòng);而 static 設(shè)置以后,偏移量什么的就沒(méi)用了.

下面我們接著來(lái)看其他的屬性

當(dāng)我們?cè)偌右粋€(gè)塊在前面 div 后面的時(shí)候: HTML

<div class="position1"></div>
<div class="position2"></div>

CSS 添加:

.position2{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position: relative;
    left:10px;
    top: 10px;
}

就會(huì)出現(xiàn)下面的情況:

?接下來(lái)我們就可以通過(guò) z-index 來(lái)控制哪一塊在最前面:

接下來(lái)我們就修改下 CSS 文件來(lái)交換他們的前后順序: position1 中加入

z-index: 2;

position2 中加入:

z-index: 1;

就可以達(dá)到交換的效果:

?