HTML和CSS高級指南——定位詳解

時間 2019-11-19

標籤 html css 高級指南定位詳解欄目 HTML 简体版

原文原文鏈接

本文由大漠根據Shay Howe的《An Adavnced Guide to HTML & CSS》第二課《Detailed Positioning》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning，以及做者相關信息css

做者：Shay Howehtml

譯者：大漠web

當在這一個頁面上實現佈局和定位有幾種不一樣的技術。使用哪一種技術，很大程序上取決於內容和目標頁面，由於有不少技術比別人的更牛。瀏覽器

例如，浮動可讓頁面元素並排顯示，並且還能夠製做一個乾淨的佈局。然而，有時候須要一些嚴格的定位，這時須要使用其餘的技術，包括「relative」和「absolute」定位。less

在這節課中，咱們先來介紹一下浮動的使用，接下來詳細介紹定位的技巧，包括如何準確的給元素在X軸、Y軸和Z軸定位。ide

包含浮動

建立一全頁面的佈局時，浮動是一種經常使用的方法，也是頁面元素定位的一種基本功能。浮動可讓元素一個挨着一個。浮動能夠建立一個天然流佈局，同時充許元素設置自身尺寸和其父元素容器的尺寸大小。佈局

當元素浮動時，一個元素的位置依賴於放置在他周邊的其餘元素。那麼圍繞在他周邊的是哪一個元素呢？這個元素會換行嗎？這一切都取決於圍繞於他的元素的DOM（文檔對象模型）。ui

DOM是什麼？

DOM是Document Object Model的簡稱，被譯爲文檔對象模型。是HTML或者XML文檔結構的API。在咱們的例子中，咱們說的是HTML的文檔，所以DOM就是表明全部元素以及這些元素之間的關係。spa

能夠考慮樹形的表現方式，展元素元素之間的關係。元素嵌套時他們存在父子關係，相同級別的還存在兄弟關係。.net

雖然浮動至關的給力，但他們本身仍是存在必定的問題。最典型的問題就是一個父元素包含了多個浮動的子元素。頁面的內容設置了一個寬度，子元素的浮動肯定了他們的位置，但浮動元素不會影響父元素的寬度。這樣作會讓父元素塌陷，從而使父元素的高度爲「0」，以及忽略其餘的屬性。不少時候，這種現像都被忽略，特別是在父元素沒有任何樣式，以及其子元素看起來都正確的對齊。

嵌套的元素不會正確的排列，也會有錯誤的樣式出現。來看看下面的演示，在「.box-set」的div應該有一個高亮的灰色背景，由於全部的子元素浮動後，這個灰色的背景色並不看到。仔細檢查後，「.box-set」的高度變成了「0」。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 100px; float: left; margin: 10px; width: 200px; }

DEMO效果

有一種方法，在容器的結束標籤前添加一個空標籤，在空標籤上直接設置樣式「clear:both」。用這種方法來清除浮動，在大多數狀況下是有效的，但這不太適合語義化。這取決於一個頁面有多少浮動須要清除，這樣形成頁面上的空標籤迅速堆積，並且在頁面中沒有上下文內容。

幸運的是有幾種不一樣方法能夠用來清除浮動，而其中用得最多的是「overflow」技巧和"clearfix"技巧。

Overflow技巧

一種清除浮動的技巧是使用「overflow」屬性。在具備浮動元素的父容器中設置「overflow」的屬性值爲「auto」，這樣父容器就會有一個高度存在，在咱們例子中的灰色背景也就能看獲得了。

在IE6裏面，父容器是須要設置一個「width」和「height」。由於高度多是一個變量，寬度爲100%，他們將能正常的工做。使用「overflow:auto;」,在IE瀏覽器中會給元素添加滾動條，這樣一來，最好是直接使用「overflow:hidden;」來清除浮動。

.box-set { background: #404853; overflow: auto; }

清除浮動後效果

使用「overflow」技巧清除浮動，確實存在一些缺點。例如：當你添加樣式，或者將嵌套在裏面的「span」元素移動到父容器的外面，或者你想給元素添加一個盒子陰影和製做一個下拉菜單。在下面的演示例子中，你能夠看到元素的盒子陰影被切斷在父元素以內。

不一樣的瀏覽器對「overflow」屬性解析不同，在瀏覽器的顯示風格也不同。看看下面的例子，注意列在不一樣瀏覽器的顯示效果。

clearfix技巧

根據上下文，清除浮動更好的方法是clearfix技巧。「clearfix」清除浮動的技術是有點複雜，但有有比使用「overflow」技巧清除浮動更好的方法？

「clearfix」技巧是基於在父元素上使用「:before」和「:after」兩個僞類。使用這些僞類，咱們能夠在浮動元素的父容器前面和後面建立隱藏元素。「:before」僞類是用來防止子元素頂部的外邊距塌陷，使用「display: table」建立一個匿名的「table-cell」元素。這也確保在IE6和IE7下具備一致性。「:after」僞類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動。

在IE6和7的瀏覽器中，加上「*zoom」屬性來觸發父元素的hasLayout的機制。決定了元素怎樣渲染內容，以及元素與元素之間的相互影響。

採起上面一樣的例子，你能夠看到容器也清除了浮動，元素也能夠移到父容器外面：

.box-set:before, .box-set:after { content: ""; display: table; } .box-set:after { clear: both; } .box-set { *zoom: 1; }

清除浮動後效果

有效的包含浮動

使用哪一種技巧來清除浮動，終究要看你本身喜愛。有些人堅持使用「clearfix」來清除浮動，由於這種方法能夠貫穿整個項目。有些人認爲「clearfix」技巧使用的代碼太多，他仍是喜歡簡單點的。至於使用什麼技巧由您來決定，只要在運用了浮動的元素的父容器須要清除浮動。

一個常見的方法是將定義一個類名，把這個類名加到須要清除浮動的容器上。例如使用「clearfix」清除浮動，Dan Cederholm爲容器設置了一個類名「group」。在須要清除浮動的容器上添加這個類名「group」。

.group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { *zoom: 1; }

單個僞類

值得注意的是，目前每一個元素只有一個「:before」和「:after」僞類。當你嘗試使用其餘的「:before」和「:after」的clearfix技巧，你的內容可能沒法達到想要的效果。

在上面的例子中，clearfix的樣式不該該直接插入到「.box-set」類中，應該是給須要清除浮動的元素中添加類名「group」。

定位屬性

不少狀況下，你須要控制更多元素的位置，並且超過了浮動所能提供的範圍，這個時候咱們就須要發揮「position」屬性的做用。「position」屬性提供五個不一樣的屬性值，每種不一樣的方式能夠給元素提供不一樣的位置。

Position static

元素都有position屬性，其默認值是「static」，這也意味着，他們沒有也不接受位置屬性設置（top、right、bottom、left屬性值設置）。另外元素設置了position屬性，將會覆蓋元素的默認值「static」。

在下面的演示中，全部的盒子都是靜態的，每一個盒子都在相鄰盒子頂部，由於他們都是塊元素，並且沒有進行浮動設置。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 80px; width: 80px; }

效果

Position relative

「relative」是「position」的另外一個屬性值，他和「static」屬性值很是的類似。主要的區別是「relative」能夠給元素設置位移（offset）「top、right、bottom和left」屬性。經過這些位移屬性設置能夠給元素進行精確的定位。

盒子位移屬性是如何工做？

盒子的位移屬性有四個「top、right、bottom和left」，用來指定元素的定位位置和方向。這些屬性只能在元素的「position」屬性設置了「relative、absolute和fixed」屬性值，才生效。

對於相對定位元素，這些屬性的設置讓元素從默認位置移動。例如，top設置一個值「20px」在一個相對定位的元素上，這個元素會在原來位置向下移動「20px」。反之，「top」設置一個「-20px」，這個元素會在原來的位置向上移動「20px」。

對於絕對定位和固定定位鮮紅，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設置一個「top」值爲「20px」，將使絕對定位元素相對於其設置了相對定位的祖先元素頂部邊緣向下移動「20px」，反之，若是設置一個「top」值爲「20px」，將使絕對定位元素相對於其設置了相對定位的祖先元素頂部邊緣向上移動「20px」。（絕對定位的參考點是其祖先元素設置了「relative」或者「absolute」值）。

設置了位移屬性的相對定位元素，他在頁面中仍然是正常的、靜態的，仍屬於天然流。在這種狀況下，其餘元素不會佔用相對定們元素當初的位置。此外，其餘元素沒有進行位置移動時，相對定伴元素可能會和其餘元素重疊。

在下面的演示中，每一個元素仍是在另外一個元素頂部，而後他們根據本身移位屬性，從默認位置進行移動，因爲他們移向方向不同，這些值使元素重疊在一塊兒。當元素設置了相對定時，周邊的元素也能看到相對定位元素的默認位置。（也就是說，相對定位元素的默認位置仍是被元素自身佔用，別的元素是沒法佔用的。也就是說相對定位元素的位移是相對於元素自身的邊緣進行位移）。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 80px; position: relative; width: 80px; } .box-1 { top: 20px; } .box-2 { left: 40px; } .box-3 { bottom: -10px; right: 20px; }

效果：

事實上，一個相對定位元素同時設置了「top」和「bottom」位移屬性值，實際上「top」優先級高於「bottom」。然而，一個相對定位元素同時設置了「left」和「right」位移屬性，他們的優先級取決於頁面使用的是哪一種語言，例如，若是你的頁面是英文頁面，那麼「left」位移屬性優先級高，若是你的頁面是阿拉伯語，那麼「right」的位移屬性優先級高。

Position absolute

絕對定位元素也具備盒子位移屬性，然而，絕對定位元素會脫離文檔流。絕對定位元素直接從文檔流中移出，絕對定位元素的位置直接和父容器是否設置了相對定位（絕對定位）有直接關係。絕對定位元素須要至少一個祖先元素設置了相對定位（絕對定位），否則元素定位會相對於頁面的主體進行定位。

使用絕對定位的元素能夠指定垂直和水平的位移屬性，使絕對定位元素相對於設置了相對定們的祖先元素邊緣進行移位。例如，一個絕對定位的元素設置了「top」值爲「50px」和一個「right」值爲「100px」,絕對定位元素會相對於其設置了相對定位的父元素的頂邊向下移動50px;向左移動100px。

然而，使用了絕對定位的元素並無進行任何盒子位移屬性設置，那麼絕對定位元素的頂部和左部會和設置了相對定位的父元素的頂邊和左邊重合。若是設置了一個盒子位移屬性，好比說「top」，那麼絕對定位元素垂直方向會進行移動，而水平位置默認仍是左邊對齊。

在下面的演示中，你能夠看到全部的盒子都相對於div的父元素進行絕對定位，每一個元素都從特定的面使用定位值進行移動，並且使用了負值的，元素移動到盒子的外面。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; height: 200px; position: relative; } .box { background: #8ec63f; height: 80px; position: absolute; width: 80px; } .box-1 { top: 6%; left: 2%; } .box-2 { top: 0; right: -40px; } .box-3 { bottom: -10px; right: 20px; } .box-4 { bottom: 0; }

效果

當一個絕對定位的元素有固定的高度和寬度，而且盒子位移同時設置了「top」和「bottom」時，「top」更具優先組，另外和相對定位元素同樣，當同時設置了「left」和「right」時，優先級取決於他的頁面使用的語言。

當一個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的「top」和「bottom」屬性時，會使整個元素的高度跨越整個容器。一樣的，當這個元素同時使用位移「left」和「right」屬性值，會使整個元素的寬度跨越整個容器。若是同時使用位移四個屬性，能夠指定一個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）

Position fixed

固定定位和絕對定位很相似，可是他定位是相對於瀏覽器窗口，而且不會隨滾動條進行滾動。也就是說，無論用戶停留在頁面那個地方，固定定位的元素將始終停留在頁面的一個地方。「position」屬性值中，僅有「fixed」屬性值不能在IE6瀏覽器下運行，若是你想在IE6正常使用固定定位，那麼你就須要爲他寫一些Hacks。

固定定位元素的盒子位移屬性的使用和絕對定位的同樣。

保持前面盒子移位，能夠看到盒子固定定位是相對於瀏覽器窗口而不是設置了相對定位的父元素。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box { background: #8ec63f; height: 80px; position: fixed; width: 80px; } .box-1 { top: 6%; left: 2%; } .box-2 { top: 0; right: -40px; } .box-3 { bottom: -10px; right: 20px; } .box-4 { bottom: 0; }

效果

固定頁頭和頁腳

固定定位最多見的一種用途就是在頁面中建立一個固定頭部、或者腳部、或者固定頁面的一個側面。就算是用戶移動瀏覽器的滾動條，仍是固定在頁現與用戶交流。

下面的示例代碼能實現。注意如何設置「left」和「right」兩個盒子位移，這使得「頁腳」跨越了頁面的整個寬度，而不需使用margin、border和padding來破壞盒模形就作了收縮自如。

HTML

< footer >Fixed Footer </footer>

CSS

footer { bottom: 0; left: 0; position: fixed; right: 0; }

z-index屬性

一般都認爲Web頁面是二維頁面，顯示的元素都在X軸和Y軸上。當你的元素有定位時，他們有時候會放置在另外一個元素的頂部。要改變這些元素是一個怎麼樣的層疊順序，要知道z軸，z軸是用「z-index」屬性來控制的。

通常來講，在DOM中，元素出現的時候就放置在z軸上。在Dom中，元素在頂部的要低於底部的。改變這種層疊順序能夠直接使用「z-index」來控制。元素的「z-index」值越高將會出如今越上面，無論元素在Dom哪一個位置上。

給元素設置「z-index」屬性，首先要在這個元素上設置了「position」屬性值爲「relatvie」、「absolute」或者「fixed」之一。一樣的，你要使用盒子位移屬性，你也要先確認元素設置了「positions」屬性值爲「relative」、「absolute」或者「fixed」之一。

在下面的登例子中，若是每一個盒子都不設置「z-index」，那麼第一個box在第二個下面，第二個在第三個下面，第三個在第四個下面。若是在盒子中指定「z-index」的值，第二個盒子在第一個和第三個上面，第三個盒子在第四個上面。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

 .box-set { background: #e8eae9; height: 160px; position: relative; } .box { background: #8ec63f; border: 3px solid #f7941d; position: absolute; } .box-1 { left: 10px; top: 10px; } .box-2 { bottom: 10px; left: 70px; z-index: 3; } .box-3 { left: 130px; top: 10px; z-index: 2; } .box-4 { bottom: 10px; left: 190px; z-index: 1; }