CSS Position 定位屬性

本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。

1. 介紹 position：介紹position的值以及輔助屬性。

2. position 定位方式：介紹position的四種定位方式：絕對、相對、固定、預設。

3. 總結 position：以示例的方式展示position。

position 屬性：規定元素的定位型別。即元素脫離文件流的布局，在頁面的任意位置顯示。

①absolute：絕對定位；脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為body文件本身。

②relative：相對定位；不脫離文件流的布局，只改變自身的位置，在文件流原先的位置遺留空白區域。定位的起始位置為此元素原先在文件流的位置。

③fixed：固定定位；類似於absolute，但不隨著滾動條的移動而改變位置。

④static：預設值；預設布局。

position屬性只是使元素脫離文件流，要想此元素能按照希望的位置顯示，就需要使用下面的屬性(position:static不支援這些)：

①left ： 表示向元素的左邊插入多少畫素，使元素向右移動多少畫素。

②right ：表示向元素的右邊插入多少畫素，使元素向左移動多少畫素。

③top ：表示向元素的上方插入多少畫素，使元素向下移動多少畫素。

④bottom ：表示向元素的下方插入多少畫素，使元素向上移動多少畫素。

上面屬性的值可以為負，單位：px 。

絕對定位；脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為body文件本身。

相對定位；不脫離文件流的布局，只改變自身的位置，在文件流原先的位置遺留空白區域。定位的起始位置為此元素原先在文件流的位置。

固定定位；類似於absolute，但不隨著滾動條的移動而改變位置。

①登入框覆蓋層：如dz論壇的登入。

②虛假qq訊息廣告。

預設定位，表示此元素為預設定位方式。

ie6的特殊處理。

當含有position屬性的元素為最邊緣元素時：

①absolute 和 relative ：含有此2個值的邊緣元素，瀏覽器縮小到此元素不可見時，會出現滾動條。

②fixed ：含有此值的邊緣元素，瀏覽器縮小到此元素不可見時，不會出現滾動條。

絕對定位；脫離文件流，遺留空間由後續元素填充。

div-b

position:relative;

相對定位；不脫離文件流，只改變自身的位置，在文件流原先的位置遺留空白區域。

div-c

position:fixed;

固定定位；固定在頁面中，不隨瀏覽器的大小改變而改變位置。

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...

CSS position 定位 屬性

關於css position，來自mdn的描述 css position屬性用於指定乙個元素在文件中的定位方式。top right bottom left 屬性則決定了該元素的最終位置。然後來看看什麼是文件流 normal flow 下面是 www.w3.org 的描述 normal flowbox...

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...