什么是css定位

本篇文章給大家分享的是有關(guān)什么是css定位，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

   當(dāng)人們對css布局不熟悉時，就會傾向于傾向于定位。定位似乎是一個容易理解的概念。在表面上，您可以準(zhǔn)確指定塊的位置和位置。雖然定位比首次出現(xiàn)的要復(fù)雜一些。在定位成為很好的選擇之前，有一些事情需要讓新手來了解一下，一旦你對css定位的工作原理有了更深入的了解，您就可以通過定位來實現(xiàn)一些很好的效果。

CSS Box模型和位置類型

為了理解定位，首先需要了解css盒模型。css中的每個元素都包含在一個矩形框中，每個框都有一個為內(nèi)容定義的區(qū)域，在該內(nèi)容周圍填充，一個邊框包圍兩者，邊框外邊緣將一個框與下一個框分開，可以在下圖中看到它。（課程推薦：css視頻教程）

定位方案定義了框在整體布局中的位置以及每個框如何影響其周圍的其他框。定位方案包括普通文檔流，浮點數(shù)和幾種類型的定位元素。

CSS位置屬性需要的5個值：

position: absolute

position: relative

position: fixed

position: static

position: inherit

我先來簡單介紹一下最后兩個屬性position: static和position: inherit

靜態(tài)定位是默認設(shè)置。具有position：static的任何元素都在普通文檔流中。盒模型定義了它所處的位置以及它如何影響其他框的規(guī)則。

靜態(tài)定位元素將忽略屬性的任何值，top，right，bottom和left以及任何z-index聲明。為了使用任何這些屬性，元素必須應(yīng)用絕對，相對或固定定位。

像所有css屬性一樣繼承只是當(dāng)前元素接收與其父元素相同的值。

下面我們來詳細看一下前面的三個屬性position: absolute、position: relative、position: fixed

絕對定位（position: absolute）

絕對定位的元素完全從正常的文檔流程中刪除。就它們周圍的元素而言，絕對定位的元素不存在。就好像元素的display屬性設(shè)置為none。如果您想保留空間以便其他元素不會移動以填充它，您需要以其他方式對其進行說明。

您可以通過頂部，右側(cè)，底部和左側(cè)屬性設(shè)置絕對定位元素的位置。您通常只定義其中的兩個，頂部或底部，左側(cè)或右側(cè)。默認情況下，每個都有一個自動設(shè)置值。

理解絕對定位的關(guān)鍵是了解起源的位置。如果top設(shè)置為20px，那么你應(yīng)該問的問題是20px。

絕對定位的元素相對于第一個父元素定位，該元素具有應(yīng)用于靜態(tài)的靜態(tài)位置。如果鏈上的父元素沒有滿足該條件，則絕對定位的元素相對于文檔窗口定位。咦？

所有關(guān)于親戚的談話都會讓人感到困惑，尤其是當(dāng)我們還沒有談到相對定位時。

當(dāng)您在元素上設(shè)置position：absolute時，css表示要查看父元素，如果它還應(yīng)用了定位（非靜態(tài)），則絕對定位元素的原點是父元素的左上角。

如果父級沒有應(yīng)用定位，則轉(zhuǎn)到父級的父級并檢查是否已應(yīng)用定位。如果確實如此，則該元素的左上角是我們絕對定位元素的原點。如果沒有，則繼續(xù)向上直到DOM，直到到達定位元素或者無法到達瀏覽器窗口的最外邊緣。

相對定位（position: relative）

相對定位的元素基于相同的頂部，右側(cè)，底部和左側(cè)屬性定位，但是僅從它們通常坐的位置移位。從某種意義上說，增加相對定位類似于添加一個非常重要的差異。相對定位元素周圍的元素表現(xiàn)為不存在這種轉(zhuǎn)變。他們忽略了它。

可以把它想象成一個鬼圖像從實際圖像中移開一點點。相對定位的元素表現(xiàn)得像是重影，而所有其他元素的行為就好像它是原始的非重影圖像。這允許元素彼此重疊，因為相對定位的元素可以移動到由其相鄰元素占據(jù)的空間中。

相對定位的元素從正常的文檔流中取出，但仍會影響其周圍的元素。這些元素就像定位元素仍處于正常文檔流中一樣。

我們不需要詢問相對定位在哪里這個問題。答案始終是正常的文件流程。就元素而言，有點像添加邊距，就相鄰元素而言，有點像什么都不做。

固定定位

固定定位的作用與絕對定位類似，但存在一些差異。

首先，固定定位元素總是相對于瀏覽器窗口定位，并采用現(xiàn)在熟悉的頂部，右側(cè)，底部和左側(cè)屬性。這是定位反叛忽略它的父元素。

第二個區(qū)別是名稱中固有的。固定定位元素是固定的。頁面滾動時它們不會移動。你告訴元素應(yīng)該在哪里，它永遠不會移動。也許畢竟不是那么叛逆。

在某種意義上，固定定位元素可能類似于固定背景圖像，其中包含塊始終是瀏覽器窗口。如果在主體上設(shè)置背景圖像，它的行為大致類似于固定定位元素，其位置的精度較低。

背景圖像也無法改變它們在第三維度中的位置，這將我們帶到z-index。

Z-Index，突破平面

該頁面是一個二維平面。它有寬度和高度。我們生活在一個三維世界，其中也包括深度和z-index就是那個深度。額外的維度移入和移出頁面。

較高的z索引位于較低的z索引之上并向頁面的前方移動。相反，較低的z-index位于較高的z-index后面并向后退到頁面的后面。

沒有z-index，定位元素有點無聊。他們使用它們沒有額外的維度，但是如果應(yīng)用了z-index，你可以做一些有創(chuàng)意的事情并允許一個元素位于另一個元素的頂部或后面。默認情況下，所有元素的z-index均為0，并且允許分配負數(shù)。

Z-Index實際上比我在這里描述的要復(fù)雜得多?，F(xiàn)在請記住額外維度和堆疊順序的基本概念，并記住只有定位元素才能使用z-index屬性。

定位問題

您可以通過定位元素看到一些常見問題，每個問題都需要一兩句話。

1.您不能將position屬性和float屬性同時應(yīng)用于同一元素。兩者都是使用什么定位方案的沖突指令。如果將兩者都添加到同一元素中，則期望在css代碼中最后出現(xiàn)的元素是使用的元素。

2.邊距不會在絕對定位的元素上坍塌。假設(shè)您有一個邊距為20px的段落應(yīng)用。在段落的正下方是應(yīng)用了30px的邊距頂部的圖像。段落和圖像之間的空間不是50px（20px + 30px），而是30px（30px> 20px）。這稱為折疊邊距。兩個邊距合并（或折疊）成為一個邊距。

絕對定位的元素沒有折疊的邊距，這可能使它們的行為與預(yù)期不同

IE讓z-index有點不對勁。在IE6中，select元素總是出現(xiàn)在堆棧的頂部，無論它的z-index和其周圍的其他元素的z-index如何。

IE6和IE7具有堆疊上下文的另一個z-index問題。IE查看應(yīng)用了定位的最外層父級，以確定哪個元素組位于堆棧的頂部，而不是查看每個單獨的元素。

<div style = “ z-index ：0 ” >
  <p style = “ z-index ：10 ” > </ p>
</ DIV>
<img style = “ z-index ：5 ” />

您會期望段落位于堆棧的頂部，因為它具有最高的z-index。但是IE6和IE7會將圖像放在段落的頂部，因為它會看到兩個不同的堆棧。一個用于div，一個用于圖像。圖像具有比div更高的z-index，因此將位于div內(nèi)的所有內(nèi)容之上。

總結(jié)

position屬性設(shè)置一個元素，以根據(jù)其中一個css定位方案進行操作。您可以在已定位元素上設(shè)置絕對值，相對值，固定值，靜態(tài)值（默認值）和繼承值。

定位方案（包括css定位元素）定義了框在布局中的位置以及相鄰元素如何受定位元素影響的規(guī)則。

z-index只能應(yīng)用于定位元素。它為頁面添加第三維并設(shè)置元素的堆棧順序

位置屬性似乎很容易掌握，但它的工作方式與它在表面上看起來有點不同。您可能認為相對定位更可能是絕對定位。在開發(fā)布局時，通常需要使用浮點數(shù)，并在要從布局中突破的特定元素上使用定位。

以上就是什么是css定位，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。