小編給大家分享一下css中的position的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

position,我們百度一下，就知道這個(gè)單詞的意思是方位，在css中，就是定位的意思，屬性名字是 position，屬性值有五個(gè)，分別是 static（默認(rèn)定位）、absolute（絕對(duì)定位）、relative（相對(duì)定位）、fixed（固定定位）、inherit（繼承定位，不常用）。

書寫規(guī)則：

position:static|absolute|relative|fixed|inherit

每個(gè)屬性值都介紹一下吧

1、position:static（默認(rèn)定位）

顧名思義，就是我們平常書寫的時(shí)候，每個(gè)div在文檔流中默認(rèn)的排版，就是static屬性值，它不會(huì)讓div或者其他元素脫離文檔流，而是遵循排版的原則，從上到下，塊級(jí)元素?fù)Q行，行內(nèi)元素不換行等等通用原則，所以，如果不用定位屬性，那么這個(gè)position就不用設(shè)置。

2、position：relative（相對(duì)定位）

相對(duì)定位，就是相對(duì)于自己本身進(jìn)行定為移動(dòng)，它不會(huì)脫離文檔流，也就是說，我給一個(gè)元素設(shè)定了這個(gè)屬性，那么這個(gè)文件還會(huì)在這個(gè)文檔流中來回移動(dòng)，至于怎么移動(dòng)，下面再講。

3、position：absolute（絕對(duì)定位）

跟相對(duì)定位不同，它是相對(duì)于擁有相對(duì)定位屬性的父元素進(jìn)行定位移動(dòng)，它會(huì)脫離文檔流。

如果父元素中的所有子元素都設(shè)置了absolute，那么所有的子元素都會(huì)浮起來，然后堆疊到一塊兒，所以為了把各個(gè)元素?cái)傞_顯示，我們需要移動(dòng)這些元素，而移動(dòng)這些元素的方法，就是直接是style樣式表中書寫：left、right、top、bottom四個(gè)屬性，然后在屬性的后面寫上px(像素)、%（百分比）等可以表示距離的單位。

在這里，我們要特別強(qiáng)調(diào)，left和right不能同時(shí)使用，top和bottom不能同時(shí)使用。

并且，這四個(gè)元素，都是相對(duì)于擁有相對(duì)定位（relative）屬性的父元素進(jìn)行移動(dòng)的。如果父元素沒有相對(duì)定位，那么絕對(duì)定位就是相對(duì)于body進(jìn)行定位的。

所以，為了不讓自己設(shè)置的元素跑飛了，那就記得給父元素設(shè)置relative吧。

4、fixed（固定定位）

這個(gè)定位是相對(duì)于瀏覽器窗口進(jìn)行的定位，移動(dòng)方法跟相對(duì)和絕對(duì)定位一樣的。

它也會(huì)脫離文案流，我們常見的側(cè)邊欄或者廣告圖就是用這個(gè)功能實(shí)現(xiàn)的。很實(shí)用，很強(qiáng)大的功能。

5、inherit（繼承定位），就是從父元素繼承position定位屬性，不怎么常用。

講到這里，我們就涉及到一個(gè)z-index (層級(jí))的問題。剛才我們講過，如果給子元素全部設(shè)置了absolute，那么所有的子元素就會(huì)堆疊在一起，互相遮蓋。

如果我們需要在一個(gè)元素上堆疊好多層，那怎么給它們排序呢。這就需要用到z-index屬性了。

z-index屬性的屬性值是數(shù)字。數(shù)字越大，那么它就顯示的最考上，比如說吧，

z-index=0 的元素就會(huì)再 z-index=1的下面顯示，z-index=10會(huì)再z-index=8上面顯示，所以，堆疊它們的顯示順序，設(shè)置z-index就可以了。

當(dāng)然，如果不設(shè)置z-index的話，默認(rèn)的，后面的元素會(huì)遮蓋前面的元素。

使用時(shí)需注意的問題：

1、float屬性不可以和position屬性共用，切記！

2、使用absolute時(shí)記得給父元素加relative

3、除了用left和top外，還有right和bottom，活學(xué)活用

4、能不用position就不用position，畢竟容易把布局搞亂

5、Javascript中調(diào)用position的方法是：div.style.positio=”absolute”類似 div是變量名

以上是“css中的position的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：css中的position的示例分析-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://aaarwkj.com/article8/dgddop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、Google、營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站導(dǎo)航

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)