1.CSS 定位

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

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

普通流:

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

浮動:

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

絕對定位:

絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

定位屬性:

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

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

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

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

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

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

接下來就著重來看看 position 屬性: 為了形象,我們先建立一個 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;
 
}

接下來我們就可以看到普通流的效果:

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

 position: relative;
 left: 60px;

接下來我們會看見:

下面我們再將 position 設(shè)置為絕對的:

position: absolute;

效果就變成了這樣:

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

下面我們接著來看其他的屬性

當(dāng)我們再加一個塊在前面 div 后面的時候: HTML

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

CSS 添加:

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

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

?接下來我們就可以通過 z-index 來控制哪一塊在最前面:

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

z-index: 2;

position2 中加入:

z-index: 1;

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

?