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

創(chuàng)新互聯(lián)公司從2013年成立，先為威信等服務(wù)建站，威信等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為威信企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

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

CSS Box模型和位置類(lèi)型

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

定位方案定義了框在整體布局中的位置以及每個(gè)框如何影響其周?chē)钠渌?。定位方案包括普通文檔流，浮點(diǎn)數(shù)和幾種類(lèi)型的定位元素。

CSS位置屬性需要的5個(gè)值：

position: absolute

position: relative

position: fixed

position: static

position: inherit

我先來(lái)簡(jiǎn)單介紹一下最后兩個(gè)屬性position: static和position: inherit

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

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

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

下面我們來(lái)詳細(xì)看一下前面的三個(gè)屬性position: absolute、position: relative、position: fixed

絕對(duì)定位（position: absolute）

絕對(duì)定位的元素完全從正常的文檔流程中刪除。就它們周?chē)脑囟裕^對(duì)定位的元素不存在。就好像元素的display屬性設(shè)置為none。如果您想保留空間以便其他元素不會(huì)移動(dòng)以填充它，您需要以其他方式對(duì)其進(jìn)行說(shuō)明。

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

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

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

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

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

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

相對(duì)定位（position: relative）

相對(duì)定位的元素基于相同的頂部，右側(cè)，底部和左側(cè)屬性定位，但是僅從它們通常坐的位置移位。從某種意義上說(shuō)，增加相對(duì)定位類(lèi)似于添加一個(gè)非常重要的差異。相對(duì)定位元素周?chē)脑乇憩F(xiàn)為不存在這種轉(zhuǎn)變。他們忽略了它。

可以把它想象成一個(gè)鬼圖像從實(shí)際圖像中移開(kāi)一點(diǎn)點(diǎn)。相對(duì)定位的元素表現(xiàn)得像是重影，而所有其他元素的行為就好像它是原始的非重影圖像。這允許元素彼此重疊，因?yàn)橄鄬?duì)定位的元素可以移動(dòng)到由其相鄰元素占據(jù)的空間中。

相對(duì)定位的元素從正常的文檔流中取出，但仍會(huì)影響其周?chē)脑?。這些元素就像定位元素仍處于正常文檔流中一樣。

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

固定定位

固定定位的作用與絕對(duì)定位類(lèi)似，但存在一些差異。

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

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

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

背景圖像也無(wú)法改變它們?cè)诘谌S度中的位置，這將我們帶到z-index。

Z-Index，突破平面

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

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

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

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

定位問(wèn)題

您可以通過(guò)定位元素看到一些常見(jiàn)問(wèn)題，每個(gè)問(wèn)題都需要一兩句話。

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

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

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

IE讓z-index有點(diǎn)不對(duì)勁。在IE6中，select元素總是出現(xiàn)在堆棧的頂部，無(wú)論它的z-index和其周?chē)钠渌氐膠-index如何。

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

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

您會(huì)期望段落位于堆棧的頂部，因?yàn)樗哂凶罡叩膠-index。但是IE6和IE7會(huì)將圖像放在段落的頂部，因?yàn)樗鼤?huì)看到兩個(gè)不同的堆棧。一個(gè)用于div，一個(gè)用于圖像。圖像具有比div更高的z-index，因此將位于div內(nèi)的所有內(nèi)容之上。

總結(jié)

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

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

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

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

以上就是什么是css定位，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：什么是css定位
本文URL：http://sd-ha.com/article22/gjjccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、虛擬主機(jī)、商城網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)