關(guān)于css中的position這個(gè)屬性，在使用的時(shí)候，有時(shí)很強(qiáng)大，有時(shí)又讓人很無奈。

強(qiáng)大的時(shí)候，對于div中的一些小物件不方便使用margin或者padding的時(shí)候，給與position:absolute;再配備left、right、top和bottom，基本上就是想放哪里放哪里了。

讓人無奈的時(shí)候，就是我們一旦濫用了position這個(gè)定位屬性，就會讓自己的布局飛的滿天是，又因?yàn)閦-index沒有設(shè)定好，基本上，整體的布局就會讓你手足無措，找原因的話，又非常麻煩，最后，恐怕只能推倒重做了。

所以，對待position這個(gè)屬性，我們要詳細(xì)的了解到它運(yùn)行的原理，以及應(yīng)用的場景，這樣，我們才可以在想用的時(shí)候完美的驅(qū)使它來完成我們想要的效果。

廢話不多說，直接上步驟，先說position的概念吧

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

書寫規(guī)則：

CSS Code復(fù)制內(nèi)容到剪貼板

position:static|absolute|relative|fixed|inherit  

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

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

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

2、position：relative（相對定位）

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

3、position：absolute（絕對定位）

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

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

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

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

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