css定位使用常見問(wèn)題是什么

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

css中的定位類型一覽

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

css定位選項(xiàng)

static是此屬性的默認(rèn)值。這時(shí)候，我們稱那個(gè)元素沒(méi)有被定位。為了定位它，我們需要改變預(yù)定義的類型。 為了改變預(yù)定義類型，我們將position的屬性值設(shè)置為下面中的一個(gè)：

relative

absolute

fixed

sticky

只有設(shè)置了之后，我們才能使用offset參數(shù)來(lái)為我們的元素指定我們想要的位置：

top

right

bottom

left

這些屬性的初始值是關(guān)鍵字“auto”

我們需要記住一點(diǎn)，當(dāng)一個(gè)元素的position被設(shè)置為absolute或者fixed，我們稱之為一個(gè)絕對(duì)定位元素。同樣，注意一個(gè)被定位的元素可以用z-index屬性來(lái)指定他的堆疊順序。

CSS定位類型的主要差別

現(xiàn)在，讓我們簡(jiǎn)單的討論下這些定位類型之間的三個(gè)關(guān)鍵差別：

一個(gè)—絕對(duì)定位的元素是完全脫離正常流的。鄰近的兄弟節(jié)點(diǎn)元素會(huì)占據(jù)它的位子。

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

一個(gè)絕對(duì)（fixed）定位的元素（記?。?/span>fixed是absolute定位的一個(gè)子類）經(jīng)常相對(duì)于視圖的定位（除了一個(gè)有transform屬性的父元素，最新版本的桌面瀏覽器都支持這種行為）。

一個(gè)粘性的定位元素是相對(duì)于最近的可滑動(dòng)的父元素（比如：overflow:auto）.如果沒(méi)有這種父元素，它就相對(duì)于視圖定位。

在接下來(lái)的事例中，我們將探索這些類型的定位是如何運(yùn)行的：

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

注意：粘性定位類型依然被認(rèn)為是實(shí)驗(yàn)性的技術(shù)，并且瀏覽器支持有限.當(dāng)然，如果你想要，你可以將方法加入不支持的瀏覽器。鑒于他有限的支持，我們?cè)诮酉聛?lái)的文章中不會(huì)提到這個(gè)屬性。

絕對(duì)定位類型的定位元素

我相信你們中許多人已經(jīng)知道絕對(duì)定位是如何實(shí)現(xiàn)的了。然而這個(gè)定位類型是需要技巧的并且容易迷惑新手設(shè)計(jì)者。

因?yàn)檫@個(gè)原因，我決定將此列入鮮為人知的概念列表之中（包括相應(yīng)的實(shí)例），涵蓋在這片文章之中。

因此，一個(gè)定位類型被設(shè)置成絕對(duì)定位的元素是相對(duì)于它最近的父元素。當(dāng)然，這僅僅在定位類型不是‘staic’的情況下有效?？紤]到這一點(diǎn)，如果元素沒(méi)有任何定位的父元素，那么它是相對(duì)于視圖定位。

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

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

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

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

絕對(duì)定位的元素?zé)o視了float這個(gè)屬性

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

看一個(gè)相關(guān)的例子：

看一下Pen絕對(duì)定位的元素?zé)o視了float這個(gè)屬性 by George (@georgemarts) 在CodePen上.

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

內(nèi)聯(lián)元素如果被設(shè)置為絕對(duì)定位，那么他會(huì)表現(xiàn)出塊級(jí)元素的特征

一個(gè)內(nèi)聯(lián)元素，如果他的position設(shè)置為 absolute或者fixed，那么它就有塊級(jí)元素的屬性。這張表總結(jié)什么類型的元素被轉(zhuǎn)換成塊級(jí)元素。

這里有一個(gè)例子：

看一下Pen內(nèi)聯(lián)元素如果被設(shè)置為絕對(duì)定位，那么他會(huì)表現(xiàn)出塊級(jí)元素的特征 by George (@georgemarts) 在CodePen上.

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

紅盒暫時(shí)沒(méi)有出現(xiàn)，因?yàn)槲覀兘o它的 width和height的這兩個(gè)屬性，這屬性只能用于塊級(jí)元素和內(nèi)聯(lián)元素。外加，這是一個(gè)空元素（不包含任何子元素比如文本節(jié)點(diǎn)）。 譯者ps：不知道是不是這里寫錯(cuò)了 寬高屬性只能用于塊級(jí)元素，用在內(nèi)聯(lián)元素上，不會(huì)有效果

記住如果我們?cè)O(shè)置定位的類型是absolute或者fixed，元素會(huì)呈現(xiàn)出塊級(jí)元素的特性。

外邊距（margins）不會(huì)在絕對(duì)定位的元素上合并

默認(rèn)情況下，當(dāng)兩個(gè)垂直外邊距互相接觸，他們之間的間距會(huì)取得兩個(gè)之間比較大的外邊距。這種行為可以理解為外邊距合并.

就像在一個(gè)浮動(dòng)的元素上的外邊距一樣，一個(gè)絕對(duì)定位元素的外邊距不會(huì)和其他外邊距合并。

思考下下面的例子：

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

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

但是，我們?cè)撊绾畏乐雇膺吘嗪喜?？?dāng)然，我們需要放些東西放去分開他們。

比如說(shuō)，舉個(gè)例子，有一點(diǎn)內(nèi)邊距或者邊框（我們可以把這條規(guī)則用于父元素或者子元素）。另一個(gè)選擇是添加clearfix類（在我的例子中）到父元素之中。

用px和百分比定位元素

你用過(guò)百分比而不是px來(lái)定義定位元素的偏移量（offsets）嗎？如果答案是是的，你可能會(huì)發(fā)現(xiàn)坐標(biāo)值的計(jì)算和你選擇的CSS單位是不一樣的（比如px或者百分比）。

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

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

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

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

在這個(gè)例子中，我們用px和百分比移動(dòng)元素。很明顯，當(dāng)偏移量是px的時(shí)候，元素按照我們所期待地移動(dòng)。又快又好。

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

關(guān)于css定位，你需要知道的5件事

注意：你也已經(jīng)許知道，transform屬性（伴隨著不同的translate方法）也可以讓我們改變?cè)氐奈恢?。但是，?qǐng)記住如果我們使用百分比作為css單位，那么元素會(huì)相對(duì)于他的尺寸定位并且不是相對(duì)于父元素尺寸定位（和偏移量（offsets）不一樣）。

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