琅琊榜海宴小说,最好看的小说排行

主頁(yè) > 知識(shí)庫(kù) > div+css詳解定位與定位應(yīng)用

div+css詳解定位與定位應(yīng)用

引伸閱讀
* 解讀absolute與relative
* position:relative/absolute無(wú)法沖破的等級(jí)
* 對(duì)《無(wú)法沖破的等級(jí)》一文的補(bǔ)充

定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點(diǎn)，如果理不清楚定位那么可能應(yīng)實(shí)現(xiàn)的效果實(shí)現(xiàn)不了，實(shí)現(xiàn)了的效果可能會(huì)走樣。如果理清了定位的原理，那定位會(huì)讓網(wǎng)頁(yè)實(shí)現(xiàn)的更加完美。

定位的定義：

在CSS中關(guān)于定位的內(nèi)容是：position:relative | absolute | static | fixed

static 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過(guò)z-index進(jìn)行層次分級(jí)。
relative 不脫離文檔流，參考自身靜態(tài)位置通過(guò) top,bottom,left,right 定位，并且可以通過(guò)z-index進(jìn)行層次分級(jí)。
absolute 脫離文檔流，通過(guò) top,bottom,left,right 定位。選取其最近的父級(jí)定位元素，當(dāng)父級(jí) position 為 static 時(shí)，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過(guò)z-index進(jìn)行層次分級(jí)。
fixed 固定定位，這里他所固定的對(duì)像是可視窗口而并非是body或是父級(jí)元素。可通過(guò)z-index進(jìn)行層次分級(jí)。

CSS中定位的層疊分級(jí)：z-index: auto | namber;

auto 遵從其父對(duì)象的定位
namber 無(wú)單位的整數(shù)值?？蔀樨?fù)數(shù)

定位的原理：

可以位移的元素（相對(duì)定位）

在本文流中，任何一個(gè)元素都被文本流所限制了自身的位置，但是通過(guò)CSS我們依然使得這些元素可以改變自己的位置，我們可以通過(guò)float來(lái)讓元素浮動(dòng)，我們也可以通過(guò)margin來(lái)讓元素產(chǎn)生位置移動(dòng)。但是事實(shí)上那并非是真實(shí)的位移，因?yàn)椋侵皇峭ㄟ^(guò)加大margin值來(lái)實(shí)現(xiàn)的障眼法。而真正意義上的位移是通過(guò)top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對(duì)一個(gè)相對(duì)定位的元素所產(chǎn)生的。我們看下面的圖：

圖片附件: 定位.PNG (2007-4-1 07:14, 33.12 K)

我們看圖中是一個(gè)寬度為200px，高度為50px，margin:25px; border:25px solid #333; padding:25px; 相對(duì)定位的元素，并且位移距上50px，距左50px。而下方是一塊默認(rèn)定位的黑色區(qū)塊。我們看到這個(gè)處在文本流的區(qū)塊被上面的相對(duì)定位擋住了一部分，這說(shuō)明：“當(dāng)元素被設(shè)置相對(duì)定位或是絕對(duì)定位后，將自動(dòng)產(chǎn)生層疊，他們的層疊級(jí)別自然的高于文本流”。除非設(shè)置其z-index值為負(fù)值，但是在 Firefox等瀏覽器中z-index為負(fù)值時(shí)將不會(huì)顯示。并且我們發(fā)現(xiàn)當(dāng)相對(duì)定位元素進(jìn)行位移后，表現(xiàn)內(nèi)容已經(jīng)脫離了文本流，只是在本文流中還為原來(lái)的相對(duì)對(duì)定位留下了原有的總寬與總高（內(nèi)容的高度或是寬度加上margin\border\padding的數(shù)值）。這說(shuō)明在相對(duì)定位中，雖然表現(xiàn)區(qū)脫離了原來(lái)的文本流，但是在文本流中還還有此相對(duì)定位的老窩。這點(diǎn)要特別注意，因?yàn)樵趯?shí)際應(yīng)用中如果相對(duì)定位的位移數(shù)值過(guò)大，那么原有的區(qū)域就會(huì)形成一塊空白。

并且我們注意，定位元素的坐標(biāo)點(diǎn)是在margin值的左上邊緣點(diǎn)，即圖中的B點(diǎn)。那么所有的位移的計(jì)算將以這個(gè)點(diǎn)為基礎(chǔ)進(jìn)行元素的推動(dòng)。當(dāng)TRBL為正值時(shí)位移的方向是內(nèi)聚的。由此可推，當(dāng)TRBL為負(fù)值時(shí)位移的方向是外放的。在圖片中有位移的箭頭指向標(biāo)識(shí)，帶有加號(hào)的是正值位移方向，帶有減號(hào)的是負(fù)值位移方向。關(guān)于位移方位，可以延伸閱讀懌飛的《由淺入深漫談margin屬性（一）》

可以在任意一個(gè)位置的元素（絕對(duì)定位）

如上所述：相對(duì)定位只可以在文本流中進(jìn)行位置的上下左右的移動(dòng)，同樣存在一定的局限性，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個(gè)打工的人他到了外地，但是在老家依然有一個(gè)專屬于他的位置，這個(gè)位置不隨他的移動(dòng)而改變。但是這樣很明顯就會(huì)空出一塊空白來(lái)，如果希望文本流拋棄這個(gè)部分就需要用到絕對(duì)定位。絕對(duì)定位不光脫離了文本流，而且在文本流中也不會(huì)給這個(gè)絕對(duì)定位元素留下專屬空位。這就好比是一個(gè)工廠里的職位，如果有一個(gè)工人走了自然會(huì)要有別的工人來(lái)填充這個(gè)位置。而移動(dòng)出去的部分自然也就成為了自由體。絕對(duì)定位將可以通過(guò)TRBL來(lái)設(shè)置元素，使之處在任何一個(gè)位置。在父層position屬性為默認(rèn)值時(shí)，TRBL的坐標(biāo)原點(diǎn)以body的坐標(biāo)原點(diǎn)為起始?？聪聢D：

圖片附件: 定位2,absolute.png (2007-4-1 07:14, 31.53 K)

上圖可知，文本流中的內(nèi)容會(huì)頂替絕對(duì)定位無(wú)素的位置，一點(diǎn)都不會(huì)客氣。而絕對(duì)定位元素自然的層疊于文本流之上。而在單一的絕對(duì)定位中，定位元素將會(huì)跑到網(wǎng)頁(yè)的左上角，因?yàn)槟抢锸撬麄兊谋唤^對(duì)定位后的坐標(biāo)原點(diǎn)。

被關(guān)聯(lián)的絕對(duì)定位

上面說(shuō)的是單一的絕對(duì)定位，而在實(shí)際的應(yīng)用中我們常常會(huì)需要用到一種特別的形式。即希望定位元素要有絕對(duì)定位的特性，但是又希望絕對(duì)定位的坐標(biāo)原點(diǎn)可以固定在網(wǎng)頁(yè)中的某一個(gè)點(diǎn)，當(dāng)這個(gè)點(diǎn)被移動(dòng)時(shí)絕對(duì)位定元素能保證相對(duì)于這個(gè)原坐標(biāo)的相對(duì)位置。也就是說(shuō)需要這個(gè)絕對(duì)定位要跟著網(wǎng)頁(yè)移動(dòng)，而并且是因定在網(wǎng)頁(yè)的某一個(gè)固定位置。通常當(dāng)網(wǎng)頁(yè)是居中形式的時(shí)候這種效果就會(huì)顯得特別的重要。要實(shí)現(xiàn)這種效果基本方式就是為這個(gè)絕對(duì)定位的父級(jí)設(shè)置為相對(duì)定位或是絕對(duì)定位。那么絕對(duì)定位的坐標(biāo)就會(huì)以父級(jí)為坐標(biāo)起始點(diǎn)。

雖然是如此，但是這個(gè)坐標(biāo)原點(diǎn)卻并不是父級(jí)的坐標(biāo)原點(diǎn)，這是一個(gè)很奇怪的坐標(biāo)位置。我們看一下模型圖示：

圖片附件: 相對(duì)定位與絕對(duì)定位的關(guān)系.png (2007-4-1 07:14, 34.02 K)

我們看到，這個(gè)圖中父級(jí)為黑灰色區(qū)塊，子級(jí)為青色區(qū)塊。父級(jí)是相對(duì)定位，子級(jí)是絕對(duì)定位。子級(jí)設(shè)置了頂部位移50個(gè)像素，左傾位移50個(gè)像素。那么我們看，子級(jí)的坐標(biāo)原點(diǎn)并不是從父級(jí)的坐標(biāo)原點(diǎn)位移50個(gè)像素，而是從父級(jí)塊的padding左上邊緣點(diǎn)為坐標(biāo)起始點(diǎn)（即A點(diǎn)）。而父級(jí)這里如果要產(chǎn)生位置移動(dòng)，或是瀏覽器窗口大小有所變動(dòng)都不會(huì)影響到這個(gè)絕對(duì)定位元素與父級(jí)的相對(duì)定位元素之間的位置關(guān)系。這個(gè)子級(jí)也不用調(diào)整數(shù)值。

這是一種很特別并且也是非常實(shí)用的應(yīng)用方式。如果你之前對(duì)于定位的控制并不自如的話，相信看完對(duì)這里對(duì)定位的解釋一定可以把定位使用得隨心所欲。

總在視線里的元素（固定定位）

由于廣告的濫用，使得一些瀏覽器軟件都開始有了廣告內(nèi)容攔截，使得一些很好的效果現(xiàn)在都不推薦使用了。比如讓一個(gè)元素可能隨著網(wǎng)頁(yè)的滾動(dòng)而不斷改變自己的位置。而現(xiàn)在我可以通過(guò)CSS中的一個(gè)定位屬性來(lái)實(shí)現(xiàn)這樣的一個(gè)效果，這個(gè)元素屬性就是曾經(jīng)不被支持的position:fixed; 他的含義就是：固定定位。這個(gè)固定與絕對(duì)定位很像，唯一不同的是絕對(duì)定位是被固定在網(wǎng)頁(yè)中的某一個(gè)位置，而固定定位則是固定在瀏覽器的視框位置。

雖然原來(lái)的瀏覽器并不支持過(guò)個(gè)屬性，但是瀏覽器的發(fā)展使得現(xiàn)在的高級(jí)瀏覽器都可以正確的解析這個(gè)CSS屬性。并且通過(guò)CSS HACK來(lái)讓IE6都可以實(shí)現(xiàn)這樣的效果（目前無(wú)法使IE5.x）實(shí)現(xiàn)這種效果。為了不使本文變成冗長(zhǎng)的大論，這里只給出這個(gè)實(shí)例算是這篇文章的結(jié)束。關(guān)于這個(gè)實(shí)例的一些問題大家可以自行分析。有不理解的地方可以給我留言！

<P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"></P>
<P><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="Design Corp" content="jonmax.com" /> <meta name="Designer mail" content="maozhenzhi(at)gmail.com" /> <meta name="roots" content="jonmax.com" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title></title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml" /> <link rel="start" href="" title="Home" /> <style type="text/css"> /*<![CDATA[*/body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;}#menu {right:0; top:0; width:130px; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#000;}</P>
<P>* html #menu {position:absolute; right:16px;}/*only for ie*/html {overflow:auto !important; overflow:hidden;}</P>
<P> /*]]>*/ </style></head><body id="" class=""><div   class="5rh5zdj"   id="menu">MozillaOperaNetscapeFirefoxIE6WindowsStyleCSS</div></P>
<P><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div><div>看右上角的內(nèi)容，不論瀏覽器怎么滾動(dòng)，它始終在那個(gè)地方！</div></P>
<P></body></P>
<P></html></P>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

標(biāo)簽：陽(yáng)泉濱州東莞遼源南充邯鄲喀什海東

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《div+css詳解定位與定位應(yīng)用》，本文關(guān)鍵詞 div+css,詳解,定位,與,應(yīng)用,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

濮阳杆衣贸易有限公司

div+css詳解定位與定位應(yīng)用