十步圖解CSS的position

CSS的positon，我想作爲一個Web製做者來講都有碰到過，但至於對其是否真正的瞭解呢？那我就不也說了，至少我本身並不很是的瞭解其內核的運行。今天在Learn CSS Positioning in Ten Steps一文中分十步介紹了CSS的「position」中的「static、relative、absolute、float」使用，以爲蠻有意思的。整理了一下貼上來與你們一塊兒分享。但願你們能喜歡。

在圖解這十個過程以前，我將實例的代碼放上來，好讓你們一個實體參考：

HTML Markup

<div id="example">
				<div id="div-before">
					<p>id = div-before</p>
				</div>
				<div id="div-1">
					<div id="div-1-padding">
						<p>id = div-1</p>
						<div id="div-1a">
							<p>id = div-1a</p>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
						</div>
						<div id="div-1b">
							<p>id = div-1b</p>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
						</div>
						<div id="div-1c">
							<p>id = div-1c</p>
						</div>
					</div>
				</div>
				<div id="div-after">
					<p>id = div-after</p>
				</div>
			</div>

CSS Code

簡單的運用一點樣式：

#example {
				float: right;
			}
			
			#example p {
				margin: 0 0.25em;
				padding: 0.25em 0;
			}
			#div-before,
			#div-after {
				background-color: #88d;
				color: #000;
			}
			
			#div-1 {
				width: 400px;
				background-color: #000;
				color: #fff;
			}
			
			#div-1-padding {
				padding: 10px;
			}
			
			#div-1a {
				background-color: #d33;
				color: #fff;
			}
			
			#div-1b {
				background-color: #3d3;
				color: #fff;
			}
			
			#div-1c {
				background-color: #33d;
				color: #fff;
			}

初步效果：

爲了後面能更好的瞭解相關知識點，我特將此例的DOM草圖畫出來：

上面的DOM圖，我想你們必定很是容易的理解，下面就一塊兒來主要看position的使用。

第一步：position: static

在CSS中全部元素的「position」屬性的默認值都是「static」，由於不須要顯式的爲每一個元素設置「position:static」。此時你們會問，那這個屬性值是否是沒有任何意義呢？其實不是的，他在CSS中也會起着很大的做用。咱們來看一個實例：

好比說你的兩個頁面，同時存在「div#div-1」，那麼此時你在A面中須要對「div#div-1」進行絕對定位；而在B頁面中「div#div-1」又不須要進行絕對定位。

A頁面中「div#div-1」絕對定位：

#div-1 {
				position: absolute;
			}

此時在B頁面中不想在進行絕對定位，那麼咱們就必須在你的樣式中顯式的從新設置「#div-1」的postion屬性爲「static」

body.B #div-1 {
				position: static;
			}

第二步：相對定位position:relative

relative稱爲相對定位，若是你給某個元素指定了postion的值爲「relative」，那麼你就能夠經過「T-R-B-L」(也就是top,right,bottom,left)來設置元素的定位值。

使用relative時有幾點須要注意：

1. 元素設置了relative時，是相對於元素自己位置進行定位；
2. 元素設置了relative後，能夠經過「T-R-B-L」改變元素當前所在的位置，但元素移位後，一樣點有當初的物理空間位；
3. 元素設置了relative後，若是沒有進行任何的「T-R-B-L」設置，元素不會進行任何位置改變。

上面三點第一點和第三點來講都是比較好理解，那麼如今針對第二點，咱們來看一個實例的操做：

在上面的基礎上，咱們對「div-1」進行向下移動20px；向左移動40px:

#div-1 {
					position:relative;
					top:20px;
					left:-40px;
				}

咱們來看看效果：

從效果圖能夠再次印證上面說的第二點。元素「div-1」向下移動了20px，向左移動了40px，自己位置變化了，而元素最初所佔的物理空間依然仍是存在，另一點元素相對定位後並無影響其餘相鄰的元素。

第三步：絕對定位position:absolute

absolute是position中的第三個屬性值，若是你給元素指定了absolute，整個元素就會漂出文檔流，並且元素自身的物理空間也同時消失了。不像「relative」還具備原先的物理空間。

咱們來看一個實例,在div-1a元素上進行絕對定位：

#div-1a {
				position:absolute;
				top:0;
				right:0;
				width:200px;
			}

此時元素「div-1a」不在當初的文檔流中，並且其此時定位也是相對於html來進行定位，那麼咱們有時候並非須要這樣的效果，哪果咱們元素div-1a還想在div-1是進行絕對定位，那要怎麼辦呢？此時就要發揮前面第二步的「relative」做用了。

第四步：relative和absolute的結合

第二步中你們知道元素相對定位「relative」是相對於元素自身定位，而在第三步中你們知道元素絕對定位「absolute」是相對於html。但這種說法只有知足這樣的條件纔是正常的：「絕對定位元素的任何祖先元素沒有進行任何的「relative」或者「absolute」設置，那麼絕對定位的元素的參考物就是html」，這樣一來，「relative」和「absolute」的結合就能起到很大的做用。

咱們接下來看一個截圖：

上圖作爲一個實例來講明「relative」和「absolute」的關係，首先上圖中共有三個div放在body內，並且他們三個div的關係是「div-1>div-2>div-3」,並且在div-3有這麼一個絕對定位：

.div-3 {
				position: absolute;
				left:0;
				top:0;
			}

下面分幾個狀況來講明上圖的意思：

一、div-1與div-2都沒有設置「position:relative」，此時咱們的div-3絕對定位後就漂到了上圖中「div-3c」的位置上；

二、如今咱們在div-2元素中加設置一個「position: relative」，此時咱們的div-3絕對定位後就漂到了上圖中的「div-3a」的位置;

三、接下來把相對定位的設置換到div-1元素上，此時div-3絕對定位後就到了div-3b的位置。

花這麼多心思，我只想說明一點：若是一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，若是有設置將以離本身最近元素定位，若是沒有將往其祖先元素尋找相對定位元素，一直找到html爲止。這句話提及起來好像有點拗口，不知道你們可否明白我說的是什麼？若是不明白你們能夠參考上圖或者下面這個實例效果：

回到上面的實例中，若是咱們在「div-1」加一個「relative」：

#div-1 {
			 position:relative;
			}
			#div-1a {
			 position:absolute;
			 top:0;
			 right:0;
			 width:200px;
			}

如今咱們相對點不在是第三步中的body了，而是「div-1」了，你們看看與第三步的變化：

第五步：relative和absolute實現佈局效果

這一步只要想演示一下使用相對定位和絕對定位實現的兩例佈局。在前面的基礎上，div-1進行相對定位，而div-1a和div-1b進行絕對定位，從而實現兩列布局的效果：

#div-1 {
			 position:relative;
			}
			#div-1a {
			 position:absolute;
			 top:0;
			 right:0;
			 width:200px;
			}
			#div-1b {
			 position:absolute;
			 top:0;
			 left:0;
			 width:200px;
			}

這樣的製做只是用來講明absolute的做用，若是隻能實現上面的效果，可能在實際製做中並不完美，爲了讓其更完美一些，在這個基礎上咱們在來看下面這一步。

第六步：設置固定高度

爲了讓佈局更適用一些，能夠在div-1元素上設置固定高度，如：

#div-1 {
			 position:relative;
			 height:250px;
			}
			#div-1a {
			 position:absolute;
			 top:0;
			 right:0;
			 width:200px;
			}
			#div-1b {
			 position:absolute;
			 top:0;
			 left:0;
			 width:200px;
			}

相比之下好一點，但咱們並不知道元素內容高度將會是多少，因此在此設置一個固定高度也是咱們實際中的一個死穴，我的不建議這樣使用。若是爲了須要，咱們能夠經過別的辦法來實現。

第七步：float

前兩步，使用絕對定位都並非很理想，那麼咱們能夠考慮使用float來解決。咱們能夠在一個元素上使用float，讓元素向左或向右，並且還可使用文本圍繞在這個元素的周邊（這個做用在文本圍繞圖片特別有用）。下面來模擬一下：

#div-1a {
			 float:left;
			 width:200px;
			}

第八步：多列浮動

上面展現的是一個列浮動，接下來看看多列的變化：

#div-1a {
			 float:left;
			 width:150px;
			}
			#div-1b {
			 float:left;
			 width:150px;
			}

浮動與絕對定位來相比，如今解決了其高度自適應的問題，但也存在一個問題，浮動也破壞了元素當初的文檔流，使其父元素塌陷了，那麼爲了解決這個問題，咱們有必要對其進行清除浮動。

第九步：清除浮動

爲了讓浮動元素的父元素不在處於塌陷狀態下，咱們須要對浮動元素進行清除浮動：

#div-1a {
			 float:left;
			 width:190px;
			}
			#div-1b {
			 float:left;
			 width:190px;
			}
			#div-1c {
			 clear:both;
			}

浮動是在css中是一個很深的課題，這裏只是輕描淡寫了一下。前面在《CSS的Float之一》和《CSS的Float之二》也介紹了一些有關於float的相關知識，有關於清除浮動的，你們也能夠點閱《Clear Float》。