HTML+CSS－－position大法好

其實在HTML和CSS的學習中，css的position屬性應該是難點之一，難在你須要靜下心來仔細搞清楚它的每個值的意義、效果和用法。可是它的功能很強大，效果也是很使人驚豔的，由於你能夠用它去實現一些float很難去實現的定位效果，好比下圖：

等等，今天咱們就以第一個圖的樣式爲例，講講position的用法。

 

首先定義一個div，而後在裏面插入底層圖片

<div class="Service_pic">
	<img src=".../流程圖.png" class="center-block Service_pic_img">
</div>

（其中center-block是Bootstrap自帶的居中類）

CSS定義：

.Service_pic{
	margin-top: 100px;
	position: relative;
}
.Service_pic_img{
    width: 30%;
}

Service_pic類的margin-top設置只是爲了讓它與頂部有必定的距離，這樣比較美觀。Service_pic_img的寬度定義則是爲了讓圖片寬度變成總div寬度的30%，height則隨着圖片寬度大小按比例縮放。這裏的Service_pic還設置了position屬性，其屬性值爲relative。

 

那麼這裏咱們要說明一下，position屬性的默認值是static，就是說當你沒有定義position屬性的值的時候，元素的position值就是static。

官方解釋static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。也就是說你不能給position：static的元素定義top, bottom, left, right 或者 z-index 屬性，它們是無效的。

 

官方解釋relative：

生成相對定位的元素，相對於其正常位置進行定位。

所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。

也就是說當你不給position：relative定義top, bottom, left, right值的時候，它跟原來的位置是沒有任何區別的。

那麼咱們這裏是給外面的div定義了一個position：relative的值的，可是卻沒有給出其 top, bottom, left, right 或者 z-index 屬性定義，這是爲何呢？後面你就知道了哈哈

這裏要注意的一點是relative是不脫離文檔流的，也就是說不管你把它移動到哪裏，它原有的位置仍是會留着的。

 

生成效果以下圖： 

 

而後固然就是把圖片文字啥的加進去，代碼以下：

<div class="Service_pic">
    <img src=".../流程圖.png" class="center-block Service_pic_img">
    <div class="step1">
        <h3 class="step1_num">0 1</h3>
        <h3 class = "step1_header">需求分析</h3>
        <img src=".../01需求分析.png" class="step1_img">
    </div>
</div>

效果以下圖：

 

最後固然是來調整最後的樣式啦，代碼以下：

.step1{
    font-family: DIN Condensed;
    color: #494949;
}
.step1_num{
    position: absolute;
    top:-0.1%;
    left: 60.4%;
    color: white;
    font-size: 4rem;
}
.step1_header{
    position: absolute;
    top:0.2%;
    left: 68%;
    font-size: 2.5rem;
}
.step1_img{
    position: absolute;
    top:-4%;
    left: 21.6%;
    width: 19%;
}

其中step1類是最外層的div，定義字體的樣式和顏色。

step1_num 類定義的是數字的位置與樣式，字體大小和顏色這些咱們就先不說了，咱們來講說position: absolute。

官方解釋 absolute：

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

經過上文咱們知道，position的默認值是static，那麼也就是說，absolute只會根據非static的第一個父元素進行定位。舉例則爲，h3 .step1_num採用了position: absolute，而它的父元素div .step1是採用position默認值static的，因此h3 .step1_num並不會相對div .step1進行定位。因此h3 .step1_num會繼續向他的上一級父元素查找，直到找到div .Service_pic這個採用position: relative;定位的父元素之後，h3 .step1_num纔會根據他定位。不然它就一直查找上去，若是最終仍是沒找到position不爲static的元素，就以瀏覽器窗口爲基準定位。再貼一下代碼大家本身琢磨一下：

<div class="Service_pic">
    <img src=".../流程圖.png" class="center-block Service_pic_img">
    <div class="step1">
        <h3 class="step1_num">0 1</h3>
        <h3 class = "step1_header">需求分析</h3>
        <img src=".../01需求分析.png" class="step1_img">
    </div>
</div>

因此一開始咱們把最外層的div .Service_pic設置成position: relative;是由於咱們想讓其中的內容（div .step1）根據這個div .Service_pic的位置進行定位而不是最外層的瀏覽器窗口，這樣子當窗口和圖片都縮放的時候纔不會產生錯位。

div .Service_pic採用position: relative;的緣由是 relative相對於其正常位置進行定位，而咱們並不須要div .Service_pic有任何位移，只須要它呆在原來的地方，爲它的子元素提供一個定位的基準。

那你可能會問幹嗎那麼麻煩，直接把div .step1設置成position: relative;不就行了嘛。可是你別忘了position: relative;是不脫離文本流的，下面幾個白大洞這樣好看？

對這裏還要說position: absolute是脫離文本流的，也就是正常文本中並不會爲它保留位置，有點像float但又比float好控制。

而後效果以下圖：

（位置和大小隻能本身慢慢調整一下咯）

這個頁面的後幾步內容與方法大致相同，這裏再也不贅述。

 

position一共有五種值：absolute、relative、static、inherit、fixed

前面三種咱們通常用的比較多，前面也介紹過了，最後來講說inherit與fixed

fixed：

生成絕對定位的元素，相對於瀏覽器窗口進行定位。

元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

position屬性的fixed值比較煩，咱們在不少網站上看到那種往下拉滑動條還在同一個位置的小廣告就是用它作的，由於它根據瀏覽器窗口進行定位，因此不管內容如何改變它的位置都是不能動搖的。

 

inherit

規定應該從父元素繼承 position 屬性的值。

inherit其實沒啥好說的，它父元素的position是啥值它就是啥值。

 

今天的分享就到這裏！天天進步多一點，天天都有好心情！