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)橹埂?

絕對(duì)定位:

絕對(duì)定位使元素的位置與文件流無(wú)關(guān)，因此不佔(zhà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è)贑SS 中加入position 賦值為相對(duì)的,向左偏移60px

 position: relative;
 left: 60px;

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

在下面我們?cè)賹osition 設(shè)定為絕對(duì)的:

position: absolute;

效果就變成這樣:

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

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

當(dāng)我們?cè)偌右粋€(gè)區(qū)塊在前面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)下面的情況:

?