css中position屬性的用法介紹-創(chuàng)新互聯(lián)

這篇文章主要介紹“css中position屬性的用法介紹”，在日常操作中，相信很多人在css中position屬性的用法介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css中position屬性的用法介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有路北免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

CSS2.0的解釋：

設(shè)置此屬性值為 absolute 會(huì)將對(duì)象拖離出正常的文檔流絕對(duì)定位而不考慮它周?chē)鷥?nèi)容的布局。假如其他具有不同 z-index 屬性的對(duì)象已經(jīng)占據(jù)了給定的位置，他們之間不會(huì)相互影響，而會(huì)在同一位置層疊。此時(shí)對(duì)象不具有外補(bǔ)丁( margin )，但仍有內(nèi)補(bǔ)丁( padding )和邊框( border )。
要激活對(duì)象的絕對(duì)(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個(gè)，并且設(shè)置此屬性值為 absolute 。否則上述屬性會(huì)使用他們的默認(rèn)值 auto ，這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則，在前一個(gè)對(duì)象之后立即被呈遞。

TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）只有當(dāng)設(shè)定了position屬性才有效。
當(dāng)設(shè)定position:absolute
如果父級(jí)（無(wú)限）沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則結(jié)合TRBL屬性以瀏覽器左上角為原始點(diǎn)進(jìn)行定位
如果父級(jí)（無(wú)限）設(shè)定position屬性，那么當(dāng)前的absolute則結(jié)合TRBL屬性以父級(jí)（最近）的左上角為原始點(diǎn)進(jìn)行定位。

當(dāng)設(shè)定position: relative
則參照父級(jí)（最近）的內(nèi)容區(qū)的左上角為原始點(diǎn)結(jié)合TRBL屬性進(jìn)行定位（或者說(shuō)相對(duì)于被定位元素在父級(jí)內(nèi)容區(qū)中的上一個(gè)元素進(jìn)行偏移），無(wú)父級(jí)則以BODY的左上角為原始點(diǎn)。相對(duì)定位是不能層疊的。在使用相對(duì)定位時(shí)，無(wú)論元素是否進(jìn)行移動(dòng)，元素依然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框。

一般來(lái)講，網(wǎng)頁(yè)居中的話用Absolute就容易出錯(cuò)，因?yàn)榫W(wǎng)頁(yè)一直是隨著分辨率的大小自動(dòng)適應(yīng)的，而Absolute則會(huì)以瀏覽器的左上角為原始點(diǎn)，不會(huì)應(yīng)為分辨率的變化而變化位置。有時(shí)還需要依靠z-index來(lái)設(shè)定容器的上下關(guān)系，數(shù)值越大越在最上面，數(shù)值范圍是自然數(shù)。當(dāng)然有一點(diǎn)要注意，父子關(guān)系是無(wú)法用z-index來(lái)設(shè)定上下關(guān)系的，一定是子級(jí)在上父級(jí)在下。

設(shè)置此屬性值為 relative 會(huì)保持對(duì)象在正常的HTML流中，但是它的位置可以根據(jù)它的前一個(gè)對(duì)象進(jìn)行偏移。在相對(duì)(relative)定位對(duì)象之后的文本或?qū)ο笳加兴麄冏约旱目臻g而不會(huì)覆蓋被定位對(duì)象的自然空間。與此不同的，在絕對(duì)(absolute)定位對(duì)象之后的文本或?qū)ο笤诒欢ㄎ粚?duì)象被拖離正常文檔流之前會(huì)占有它的自然空間。放置絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外，滾動(dòng)條不會(huì)出現(xiàn)。其實(shí)對(duì)于定位的主要問(wèn)題是要記住每個(gè)定位的意義。相對(duì)定位是“相對(duì)于“元素在文檔流中初始位置的，而絕對(duì)定位是”相對(duì)于“最近的已經(jīng)定位的祖先元素。

以下是補(bǔ)充：

雖然有知道css的絕對(duì)定位（absolute）、相對(duì)定位（relative），但卻從未自己動(dòng)手寫(xiě)過(guò)相關(guān)的效果！
忙活了一大半天，也算是完成了！也把這兩個(gè)屬性搞明白了一些！

總結(jié)如下：

先看下面這一個(gè)層結(jié)構(gòu)

代碼如下:

<body>
<div id=posi>
<div id=rel> 此層只應(yīng)用position：relative;樣式 </div>
<div id=abs> 此層只應(yīng)用position：absolute;樣式 </div>
<div id=sss> 不應(yīng)用樣式 <div>
</div>
</body>

1、absolute：不占位、relative：有占位！

如上層結(jié)構(gòu):

id為rel的層在顯示時(shí)，會(huì)占用一行！其后面的abs層只會(huì)在下一行顯示出來(lái)！
id為abs的層在顯示時(shí)，會(huì)與后面id為sss的重疊在一起！

2、默認(rèn)情況下（不結(jié)合top等來(lái)定位），absolute（絕對(duì)定位）以父層來(lái)定位的
如上面的id為abs的層，如果不結(jié)合top等來(lái)定位，則其顯示位置會(huì)隨父級(jí)posi層（posi在文檔左下角，其也會(huì)在左下角）

3、在結(jié)合top、bottom、right、left等屬性時(shí)，absolute（絕對(duì)定位）以窗口做為定位，relative以自身的占位為基線做偏移！如下：

代碼如下:

<body>
<div id=posi>
<div id=sss> 不應(yīng)用樣式 <div>
<div id=rel> 此層應(yīng)用position：relative;bottom：30px;樣式 </div>
<div id=abs> 此層只應(yīng)用position：absolute;bottom：30px;樣式 </div>
</div>
</body>

以上代碼：
id為rel的層會(huì)上移并與id為sss的層重疊
id為abs的層會(huì)以窗口為基線，移至距離窗口30像素的位置！

4、在結(jié)合top、bottom、right、left等屬性時(shí)，如果想absolute（絕對(duì)定位）能以父層做為定位基線的話，則在父層應(yīng)用absolute或relativ屬性就可以!如下：

代碼如下:

<body>
<div id=posi style=”position：relative”>
<div id=rel> 此層應(yīng)用position：relative;bottom：30px;樣式 </div>
<div id=abs> 此層只應(yīng)用position：absolute;bottom：30px;樣式 </div>
</div>
</body>

以上代碼：id為posi的層，也可以用absolute屬性！
id為rel的層，不受影響，以自身的占位為基線做偏移！

id為abs的層是以id為posi層的底邊做為定位基線，如果此時(shí)posi層的高度小于30px的話，abs層可能沒(méi)辦法看到哦！

個(gè)人總結(jié)：

position:relative和position:absolute都可以改變?cè)卦谖臋n中的位置，都能激活元素的left、top、right、bottom和z-index屬性。（默認(rèn)這些屬性未激活，設(shè)置了也無(wú)效）

設(shè)置position:relative和position:absolute都會(huì)讓元素浮起來(lái)，會(huì)改變正常情況下的文檔流。

不同：

position:relative會(huì)保留自己在z-index:0層的占位，left、top、right、bottom值是相對(duì)于自己在z-index層的位置。

position:absolute會(huì)完全脫離文檔流，不再z-index:0層保留占位符，其left、top、right、bottom值是相對(duì)于自己最近的一個(gè)設(shè)置了position:relative或position:absolute的祖先元素的，如果祖先元素全都沒(méi)有設(shè)置，那么就相對(duì)于body元素

到此，關(guān)于“css中position屬性的用法介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前文章：css中position屬性的用法介紹-創(chuàng)新互聯(lián)
分享路徑：http://www.rwnh.cn/article30/essso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、商城網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

css中position屬性的用法介紹-創(chuàng)新互聯(lián)