今天這篇文章我想和大家談一談通過CSS對(duì)頁面進(jìn)行布局中關(guān)于定位的內(nèi)容。布局涉及的內(nèi)容是很多的，其中大方向很多，細(xì)節(jié)也很多，為此我們甚至需要使用一整個(gè)技術(shù)即CSS去完成，作為我的讀書筆記我自然是不準(zhǔn)備一次就寫完，畢竟我自己也只是稍有了解吧。

這里我就把其基礎(chǔ)部定位提出來講一下

在我們考慮實(shí)現(xiàn)一個(gè)頁面時(shí)，首先需要考慮的是我們那個(gè)模塊該放在哪里，這就是定位了。如果CSS中未做操作，則會(huì)按照HTML結(jié)構(gòu)直接定位。在CSS中元素定位的方法主要為三個(gè)，分別是position，float和flex。其中flex布局我已經(jīng)在前面的文章中寫過了，在這篇文章中我想談一談另外兩個(gè)。

1，position 定位

在CSS中我們可以為元素設(shè)置position屬性，其取值為一下5個(gè)：

• absolute //絕對(duì)定位
• relative //相對(duì)定位
• fixed //相對(duì)于瀏覽器定位
• static //默認(rèn)值，無定位，即元素出現(xiàn)在正常的流中
• inherit //繼承 ，即繼承父類元素的position屬性

接下來我就談一談這5個(gè)值吧。

1）absolute 絕對(duì)定位

以父類元素為基準(zhǔn)，即父類元素的左上角為坐標(biāo)原點(diǎn)（0,0）位置來放置，脫離正常流。

2）relative 相對(duì)定位

以自己為基準(zhǔn)，即以自己的左上角為坐標(biāo)原點(diǎn)（0,0）位置來放置，不脫離正常流。

3）fixed 相對(duì)于瀏覽器

以瀏覽器為基準(zhǔn)，即以瀏覽器串口的左上角為坐標(biāo)原點(diǎn)（0,0）位置來放置，脫離正常流。

4）statuc 和 inherit

這兩個(gè)就比較直接了，就是上面注釋中所寫的內(nèi)容了，這里我就不多提了。

而position屬性只是決定了定位的方式，具體的定位還需要配合上另外幾個(gè)特定的定位屬性：

• left //相較于基準(zhǔn)左邊界的偏離位置。
• top //相較于基準(zhǔn)上邊界的偏離位置。
• right //相較于基準(zhǔn)右邊界的偏離位置。
• bottom //相較于基準(zhǔn)下邊界的偏離位置。

最后再說三個(gè)細(xì)節(jié)，第一，所有的定位方式都是去定位元素的左上角那個(gè)點(diǎn)，就是定了你那個(gè)角，別的內(nèi)容就照常顯示的；第二，上面說的left、top等定位屬性，一般選擇left和top的組合，right和bottom的組合也可以但少有使用；第三這里的left看清楚了，是距離左邊邊界的距離，不是向左移動(dòng)的距離。

2，float 浮動(dòng)定位

在CSS這我們還提供了float屬性，通過浮動(dòng)的方式進(jìn)行定位。這時(shí)候就搖先理解什么是浮動(dòng)呢？就我個(gè)人理解就是把元素具體化，兩個(gè)浮動(dòng)元素就像兩個(gè)具體的盒子，就不能交叉，擺放是自然的分開放置，從而實(shí)現(xiàn)布局。float屬性類似于上面提到的position屬性一樣，是個(gè)單獨(dú)的CSS屬性，有一下四個(gè)值：

• left //元素向左浮動(dòng)
• right //元素向右浮動(dòng)
• none //元素不浮動(dòng)
• inherit //繼承，繼承父類元素的float屬性

其實(shí)float中沒什么特別可說的，意思也十分的直接，直接寫兩個(gè)就都明白了。這里有個(gè)細(xì)節(jié)說一下浮動(dòng)布局的元素也是脫離在正常流之外的，這也會(huì)導(dǎo)致一些問題，但今天就不多說，在以后的文章中我會(huì)一起談一下。