css定位使用常見問題是什么

這篇文章主要介紹css定位使用常見問題是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css中的定位類型一覽

position這個css屬性允許我們指定元素的定位類型。

css定位選項

static是此屬性的默認值。這時候，我們稱那個元素沒有被定位。為了定位它，我們需要改變預定義的類型。 為了改變預定義類型，我們將position的屬性值設置為下面中的一個：

relative

absolute

fixed

sticky

只有設置了之后，我們才能使用offset參數來為我們的元素指定我們想要的位置：

top

right

bottom

left

這些屬性的初始值是關鍵字“auto”

我們需要記住一點，當一個元素的position被設置為absolute或者fixed，我們稱之為一個絕對定位元素。同樣，注意一個被定位的元素可以用z-index屬性來指定他的堆疊順序。

CSS定位類型的主要差別

現在，讓我們簡單的討論下這些定位類型之間的三個關鍵差別：

一個—絕對定位的元素是完全脫離正常流的。鄰近的兄弟節點元素會占據它的位子。

一個相對或者粘性定位的元素保留他們的位置。鄰近的元素不會占據這個元素保留的空間。然而，這個元素的偏移量（offsets）不會占據空間。他們完全忽略其他的元素，因此這可能會與其他元素相互重疊。

一個絕對（fixed）定位的元素（記住：fixed是absolute定位的一個子類）經常相對于視圖的定位（除了一個有transform屬性的父元素，最新版本的桌面瀏覽器都支持這種行為）。

一個粘性的定位元素是相對于最近的可滑動的父元素（比如：overflow:auto）.如果沒有這種父元素，它就相對于視圖定位。

在接下來的事例中，我們將探索這些類型的定位是如何運行的：

看一下Pen定位概述 by George (@georgemarts) 在CodePen上.

注意：粘性定位類型依然被認為是實驗性的技術，并且瀏覽器支持有限.當然，如果你想要，你可以將方法加入不支持的瀏覽器。鑒于他有限的支持，我們在接下來的文章中不會提到這個屬性。

絕對定位類型的定位元素

我相信你們中許多人已經知道絕對定位是如何實現的了。然而這個定位類型是需要技巧的并且容易迷惑新手設計者。

因為這個原因，我決定將此列入鮮為人知的概念列表之中（包括相應的實例），涵蓋在這片文章之中。

因此，一個定位類型被設置成絕對定位的元素是相對于它最近的父元素。當然，這僅僅在定位類型不是‘staic’的情況下有效。考慮到這一點，如果元素沒有任何定位的父元素，那么它是相對于視圖定位。

為了解釋這種行為，看下面的在線實例：

看一下Pen絕對定位類型的定位元素 by George (@georgemarts) 在CodePen上.

在這個實例中，我們給綠盒子一個初始的絕對定位類型，設置他的偏移量（offsets）為bottom:0和left:0。此外，我們不需要給直接父元素（紅盒子）一個特定的定位類型。

然而，我們相對定位父元素（比如：一個class為jumbotron的元素）。只要我們改變他父元素的定位類型，注意綠盒子的定位是如何改變的。

絕對定位的元素無視了float這個屬性

如果一個元素是浮動左或右，而且我們將此定位類型設置為 'absolute' 或者 'fixed' ，那么float的屬性就會被設置為 'none' .另一方面，如果我們將定位類型設置成relative，那么元素依然包含浮動的屬性。

看一個相關的例子：

看一下Pen絕對定位的元素無視了float這個屬性 by George (@georgemarts) 在CodePen上.

在這個例子中，我們將兩個不同的元素定義為 float:right. 注意當紅盒子變成了絕對定位的元素，這就無視了float屬性，然而相對定位的綠盒子保留了他float的值。

內聯元素如果被設置為絕對定位，那么他會表現出塊級元素的特征

一個內聯元素，如果他的position設置為 absolute或者fixed，那么它就有塊級元素的屬性。這張表總結什么類型的元素被轉換成塊級元素。

這里有一個例子：

看一下Pen內聯元素如果被設置為絕對定位，那么他會表現出塊級元素的特征 by George (@georgemarts) 在CodePen上.

在這個例子中，我們定義兩個不同元素。第一個（比如：綠盒子）為塊級元素（比如：div）。第二個（比如：紅盒子）為內聯元素（如 span）。注意只有綠盒子有顯示。

紅盒暫時沒有出現，因為我們給它的 width和height的這兩個屬性，這屬性只能用于塊級元素和內聯元素。外加，這是一個空元素（不包含任何子元素比如文本節點）。 譯者ps：不知道是不是這里寫錯了 寬高屬性只能用于塊級元素，用在內聯元素上，不會有效果

記住如果我們設置定位的類型是absolute或者fixed，元素會呈現出塊級元素的特性。

外邊距（margins）不會在絕對定位的元素上合并

默認情況下，當兩個垂直外邊距互相接觸，他們之間的間距會取得兩個之間比較大的外邊距。這種行為可以理解為外邊距合并.

就像在一個浮動的元素上的外邊距一樣，一個絕對定位元素的外邊距不會和其他外邊距合并。

思考下下面的例子：

看一下Pen外邊距（margins）不會在絕對定位的元素上合并 by George (@georgemarts) 在CodePen上.

在這個例子中個，最初的元素的外邊距等于20px。此外，他的top外邊距和父元素的top外邊距重疊了，這也是20px。正如你所見，只有當我們絕對定位元素，這個top外邊距才不會和父元素的相關外邊距重疊。

但是，我們該如何防止外邊距合并？當然，我們需要放些東西放去分開他們。

比如說，舉個例子，有一點內邊距或者邊框（我們可以把這條規則用于父元素或者子元素）。另一個選擇是添加clearfix類（在我的例子中）到父元素之中。

用px和百分比定位元素

你用過百分比而不是px來定義定位元素的偏移量（offsets）嗎？如果答案是是的，你可能會發現坐標值的計算和你選擇的CSS單位是不一樣的（比如px或者百分比）。

這看上去有點迷惑，是吧？因此讓我看下規范中關于聲明為百分比的偏移量。

偏移量是包含框的寬度（對于left或者right）或者高度（對于top和bottom）的百分比。對于黏著定位的元素，偏移量是底部的寬度（對于left或者right）或者高度（對于top和bottom）的百分比。負值也是允許的。

也就是說，只要我們定義偏移量為百分比，目標元素的定位就依賴于父元素的寬（對于左右的偏移量）和高（對于上下的偏移量）。

下面的例子說明了差別： 看一下Pen用px和百分比定位元素 by George (@georgemarts) 在CodePen上.

在這個例子中，我們用px和百分比移動元素。很明顯，當偏移量是px的時候，元素按照我們所期待地移動。又快又好。

相反的是，當我們用百分比作為css單位的時候，元素的定位按照它父元素的尺寸。這里有一個有用的可視化告訴你新位置（用百分比）是如何計算的。

關于css定位，你需要知道的5件事

注意：你也已經許知道，transform屬性（伴隨著不同的translate方法）也可以讓我們改變元素的位置。但是，請記住如果我們使用百分比作為css單位，那么元素會相對于他的尺寸定位并且不是相對于父元素尺寸定位（和偏移量（offsets）不一樣）。

以上是“css定位使用常見問題是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！