position屬性可以讓你讓你隨意控制乙個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓乙個顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由於static為預設的方式。
position屬性可以讓你讓你隨意控制乙個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓乙個顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由於static為預設的方式。所以實際上可用的值只有3個 為了方便閱讀~
以下統稱為：固定(fixed)、相對(relative)、 絕對(absolute).
第1：固定定位(fixed)
固定定位可以讓某一元素固定在螢幕的某個位置.其效果和背景的background-attachment:fixed屬性相似！但是ie6以及更早的版本不支援.所以以下例子請在非ie6以下瀏覽器下瀏覽
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
第2：相對定位(relative)
相對定位是依據設定定位屬性的4個方向上的任意值來實現相對與其本來在文件中正常顯示的位置的偏移；
當相對定位的元素偏移出其本來的文件流的位置：其他元素仍然認為那個位置為其的邏輯文件流區域.而不會去補上去，雖然我們感官上認為那裡是沒有東西的~
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
其中第2個色塊就是相對於其本來的文件流中的位置依據left:10px;top:20px;的定位屬性值進行偏移.
其後面的第3個色塊依然認為前面的空白（就是第3的原本的文件流的位置）為第3個色塊的文件流區域 則不會自動填充上去.
當相對定位的父元素出現滾動條時，ie瀏覽器的特殊情況
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
當相對定位的父元素有滾動條的時候，該相對定位元素再ie的表現很詭異（其後面的元素依然認為那個位置為該元素的預設位置，而表現出相對定位的特性，但是拉動滾動條時，在ff下正常即相對定位的元素和文件一起滾動，但是在ie系列裡面，相對定位的色塊依然在原地不動，此時元素的特性有點像絕對定位）
當相對定位同時擁有定位屬性的4個方向的值和margin屬性。相對定位的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產生疊加效果，而按照方向執行疊加後的數值的偏移
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
position屬性可以讓你讓你隨意控制乙個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓乙個顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由於static為預設的方式。
第3：絕對定位(absolute)
當元素設定絕對定位後.則會從正常的文件流中脫離.其後面的元素會完全忽視這個絕對定位的元素.就好像正常文件流中不存在這個元素一樣.然後根據離其最近的乙個具有position屬性的父物件的邊緣為定位基點（如果沒有沒有這樣乙個父物件 那麼預設依據視窗元素定位），根據設定定位屬性的4個方向的值來實現絕對的定位布局.
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
我們可以看到.當色塊2設定絕對定位之後.後面的第3色塊忽視其存在，自動填補到正常的文件流中（這個是根據視窗元素定位）
我們再來看一下ie中依據視窗元素定位的乙個特殊情況
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
此demo與position:absolute的定位工作方式無關~只是作為ie中特殊的情況列出來
除了上面的基本的position:absolute特點，其還有下面幾點；
1.如果我們只設定了position:absolute而沒有設定定位屬性的4個方向值的話.那麼該絕對定位的元素依然遵循其在文件流中的正常位置，它仍然受前一元素的文件流位置影響，按照正常文件流進行布局。只不過現在是從正常的文件流中抽出.其後面的元素會忽視其存在.而自動補上去.因為絕對定位的元素是不佔文件流的布局空間的。
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
例子中第2個紅色的色塊就是乙個只具有position:absolute屬性的元素，它仍然在正常的布局位置呈現，只不過後面的元素會忽視其存在
2.絕對定位會自動把乙個元素轉化為塊元素
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
按照標準的渲染方式.行間元素設定的寬度和高度是被忽略的，但是當給元素絕對定位之後，該元素會具有塊元素的特性，而可以設定寬度和高度（雖然絕對定位的元素不佔布局空間）
position屬性可以讓你讓你隨意控制乙個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓乙個顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由於static為預設的方式。
3.在ie下沒有設定定位屬性4個方向的值的絕對定位的塊元素的表現是inline-block 再ff下其是block
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
這個其實是瀏覽器的差異，在ff下在塊元素擁有position:absolute屬性後，其依然作為乙個塊元素，而相對於前面的文件流而換行，所以為了統一，在這種使用情況下，可以加上display:inline即可保證各個瀏覽器統一
4.絕對定位元素依據其定位基點進行絕對定位時會忽視其定位基點的padding空間
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
圖中的紅色區域是乙個高度和寬度為500px且padding:100px;因為絕對定位元素忽視其定位基點的padding屬性，所以在頂部呈現
5.設定任何乙個方向的定位屬性.該絕對元素除該方向按照定位屬性的值依據其具有position屬性最近的父元素為基點進行定位.其另外方向上的邏輯位置依然受前一文件流中的元素影響.按照正常的位置進行布局：
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
我們可以看到圖中的紅色區域，除按照left:40這個屬性偏移40畫素後，其垂直方向的位置依然為正常文件流中的位置
position屬性可以讓你讓你隨意控制乙個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓乙個顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由於static為預設的方式。
6.當元素設定為絕對定位後改元素內的浮動會自動清除
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
7.當絕對定位同時擁有定位屬性和margin屬性、絕對定位的的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產生疊加效果，而按照方向執行疊加後的數值的偏移
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
我們會發現這個紅色的色塊距離左邊200px.left margin-left
小結：當元素同時擁有浮動和絕對定位時.絕對定位的優先權大於浮動.因為浮動受文件的邏輯結構位置限制。而絕對定位不會。
所以當絕對定位脫離文件流，絕對定位的元素不受浮動影響.即float:left會失效，
數學上我們知道.x軸上乙個數值 y軸上的乙個數值即可確定乙個點，感官上left right屬於x軸bottom top屬於y軸。
我們完全可以設定乙個無寬度和高度絕對定位的元素同時擁有top right bottom left來實現其根據其參考的定位基點的父元素的的大小來自適應大小.
但是ie6不支援.ie6只能識別left的值而忽視right.所以下面例子請在非ie6以及一下瀏覽器瀏覽
例子：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
實際應用:（個人的習慣）
標題（「標題文字」和「更多」）（相對 絕對）
需要讓一些具有vertical-align:middle屬性的元素抽出文件流（這個看具體情況，因為vertical-align:middle會影響文件中的文字對齊）（絕對）
固定元素的浮動塊（該浮動塊內的元素布局固定 可以用絕對定位，並設定該浮動塊為相對）(相對 絕對)
本文標題: css教程:position屬性
本文位址: /web/css/26866.html
CSS 定位position屬性
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...
CSS 定位屬性position
一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局，在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...
css 聊聊position屬性
今天呢，想聊聊css裡的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。根據mdn文件，css屬性 position 用於指定乙個元素在文件中的定位方式。另外還需要偏移屬性top,right,bottom 和 left來決定了該元素的最終位置。適用於所有元素...