css定位——position和float的用法詳解

時間 2019-11-07

標籤 css 定位 position float 用法詳解欄目 CSS 简体版

原文原文鏈接

網頁開發中佈局是一個永恆的話題。巧妙的佈局會讓網頁具備良好的適應性和擴展性。css的佈局主要涉及兩個屬性——position和float。它們倆看上去很容易被弄混，但是仔細分析一下，它們的區別仍是很明顯的。下面和你們分享一下個人學習心得。 javascript

首先，先介紹一個很重要的概念「文檔流」，明白了這個概念以後就很容易理解position和float的定位原理了。 css

在css中有一個z-index屬性，由於網頁是「立體的」，它有z軸，這個z軸的大小就由z-index控制。默認狀況下，全部頁面元素均位於z-index:0這一層，而這一層順序排列的元素就構成了「文檔流」。不管是position仍是float，它們都是經過改變文檔流來實現定位。 html

css有三種基本的定位機制：文檔流、浮動和絕對定位。除非專門指定，不然全部元素都在文檔流中定位。也就是說，文檔流中的元素的位置由元素在 X(HTML) 中的位置決定。css定位的基本思想很簡單，它容許你使得元素相對於其正常應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置來進行定位。前端

下面介紹position和float的定位原理。 java

（一）float： web

float屬性定位的元素位於z-index:0層。它是經過float:left和float:right來控制元素在0層左浮或右浮。float會改變正常的文檔流排列，影響到周圍元素。float元素在文檔流中一個挨一個排列。但注意，只是float元素之間一個挨一個排列，對於非float的元素，float元素是視而不見的，會越過它們。瀏覽器

以下面的一段代碼：佈局

<html>
<head>
<style type="text/css">
    .fl{float:left;background:red;border:solid 1px #00f;}
    .nfl{background:#ff0;border:solid 1px #000;}
</style>
</head>
<body>
    <span class="fl">我是float元素1</span>
    <span class="nfl">我是非float元素</span>
    <span class="fl">我是float元素2</span>
    <span class="fl">我是float元素3</span>
</body>
</html>

一、二、3三個元素是float的，它們會越過非float元素一個挨一個排列，把非float元素擠到最後了。效果以下圖：

歸納來講，float:left時，會把非float元素擠到全部float元素的右邊，float:right時是擠到左邊。學習

（二）position： 編碼

position屬性包括下面四個值：

static（默認）

元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的框的形狀，它本來所佔的空間仍保留。

absolute

元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

設置absolute或relative會讓z-index的值大於0。不一樣的是，absolute徹底脫離文檔流，再也不在z-index中保留佔位符，而relative雖然本身已浮起來，但仍然會保留本身在z-index:0中的位置，所以relative在z-index:0層中的相鄰元素不會所以受到影響。下面是具體用法。

1. 靜態（static）：

元素順序顯示，在一個文檔流中，一個挨着一個，可是不像relative那樣能夠設置top之類的。靜態定位僅僅意味着內容遵循正常從上到下的HTML流。

2. 相對(relative)：

一個相對定位的元素相對它在HTML流中的當前位置而放置。移動一個帶有相對定位的元素，在該元素本該放置的地方留下了一個「洞」。相對定位的主要用處不是移動一個元素，而是給行內在它內部的絕對定位的元素設定一個新的參考點。

position: relative的元素相對於本身原本應該在的位置進行偏移，偏移後的位置可能覆蓋別人（是漂浮在上方）。它原來的位置也空着，由於它會被加入到文檔流中。

3. 絕對(absolute)：

絕對定位讓你經過以pixel、em、percentage來指定一個左、右、上或者下的位置來肯定一個元素的位置。此外，絕對定位的元素被徹底與頁面流分離，換句話說，網頁上的其餘東西甚至不知道這個絕對定位的元素的存在。

absolute定位的通常用法：

若是一個標籤有一個絕對的位置，而且它不在任何其餘應用了absolute、relative或者fixed定位的標籤裏面，那麼它是相對於頁面（body元素）進行定位的。
若是一個標籤處在另外一個帶有absolute、relative或者fixed定位的標籤裏面，那麼它是相對於該元素的邊界進行定位的。

即，position: absolute的元素在static的父元素中是相對頁面（不是瀏覽器窗口）進行偏移，在非static父元素中（一般是relative，由於若是父元素是absolute，那父元素還要向上找非static祖先元素）是相對父元素進行偏移。

4. 固定(fixed)：

一個固定的元素被鎖定在屏幕的位置上。fixed是相對瀏覽器窗口的固定位置定位，如網頁中的「回到頂部」按鈕。

注意：不要試圖給同一個樣式既應用float屬性又應用任何一種定位，除了靜態或者相對定位以外。浮動和絕對或者固定定位不可能同時做用在同一個元素上。

參考資料：

1. w3c school

2. 《CSS實戰手冊》

3. 《編寫高質量代碼——Web前端開發修煉之道》

（嘻嘻，個人參考資料終於不只僅是網頁而有書籍了。看書真的讓人內心很安靜，也頗有收穫。強烈推薦曹劉陽的《編寫高質量代碼——Web前端開發修煉之道》，太棒的一本書了！讀來猶如醍醐灌頂通常！相見恨晚啊！不過建議你們對html、css和javascript都有所瞭解，並有一點實踐項目經驗以後再讀。由於有了苦逼的編碼經歷以後，才能更好地體會書中所講的問題，印象更加深入。若是徹底沒有經驗的同窗，推薦先閱讀《大巧不工——Web前端設計修煉之道》，書中將web開發的過程從頭到尾，娓娓道來。）