css中的position的示例分析

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

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

書寫規則：

position:static|absolute|relative|fixed|inherit

每個屬性值都介紹一下吧

1、position:static（默認定位）

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

2、position：relative（相對定位）

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

3、position：absolute（絕對定位）

跟相對定位不同，它是相對于擁有相對定位屬性的父元素進行定位移動，它會脫離文檔流。

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

在這里，我們要特別強調，left和right不能同時使用，top和bottom不能同時使用。

并且，這四個元素，都是相對于擁有相對定位（relative）屬性的父元素進行移動的。如果父元素沒有相對定位，那么絕對定位就是相對于body進行定位的。

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

4、fixed（固定定位）

這個定位是相對于瀏覽器窗口進行的定位，移動方法跟相對和絕對定位一樣的。

它也會脫離文案流，我們常見的側邊欄或者廣告圖就是用這個功能實現的。很實用，很強大的功能。

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

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

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

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

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

當然，如果不設置z-index的話，默認的，后面的元素會遮蓋前面的元素。

使用時需注意的問題：

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

2、使用absolute時記得給父元素加relative

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

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

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

以上是“css中的position的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！