學習css
布局的時候，對
position
的認識一直不是很清晰，以致於面試的時候回答的不清楚，現在好好的梳理一下這個問題。
css 有三種基本的定位機制：
1.普通流
2.浮動
3.絕對定位
1. 普通流：除非專門指定，否則所有框（div
、h1
或 p
元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即「塊框」）都在普通流中定位。即，普通流中的元素的位置由元素在
(x)html
中的位置決定。
2. 浮動：css的
float
屬性允許使用者對元素進行向左向右浮動
3. 絕對定位：css的
position
屬性允許使用者對元素進行定位。
下面是position
的四種不同型別的屬性值及含義。
1. static：
position的預設值，一般不設定
position
屬性時，會按照正常的文件流進行排列。
塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中
2. relative：
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
relative的偏移是基於物件本身的位置，基於物件
margin
的左上側的。
若有設定padding
，則以padding
內邊界開始的
3. absolute：
（1）當該元素的父級物件設定了position
屬性，且
position
的屬性值為
absolute
或者relative
時，即不是預設值的情況下，當前元素按照這個
parent
來進行定位。
（使用absoulte，必須指定
left
、right
、 top
、 bottom
屬性中的至少乙個，否則left/right/top/bottom
屬性會使用它們的預設值
auto
，這將導致物件遵從正常的
html
布局規則，在前乙個物件之後立即被呈遞，簡單講就是都變成
relative
，會占用文件空間 變成relative的效果）
（2）那元素按照這個parent
來進行定位時，是按照定位點來進行定位呢？如果parent
設定了margin
，border
，padding
等屬性，那麼這個定位點將忽略
padding
，將會從
padding
開始的地方
(即只從
padding
的左上角開始
)進行定位
注意：當父級物件position
設定為absolute
後，當前元素會導致溢位正常的文件流，就像它不屬於
parent
一樣，它漂浮了起來，此時它後面的同級元素將獲得當前元素的位置，它的文件流不再基於當前元素，而是直接從父級元素開始。
4. fixed：
使用fixed定位的話，必須指定 left
、right
、 top
、 bottom
屬性中的至少乙個。原因同上absolute。fixed是特殊的
absolute
，即fixed
總是以body
為定位物件的，按照瀏覽器的視窗進行定位。
CSS定位學習筆記
僅僅是自己對著w3cschool整理的一些 css 基礎知識點，敲一遍加深下印象也方便以後複習。一切皆為框 與之相反，span 和strong 等元素稱為行內元素，這意味著他們的內容顯示在行內，即 行內框 some text some more text.在這種情況下，這個框稱為無名塊框，因為它不與...
css學習筆記20160126定位
文件流是html可顯示元素在排列時所占用的位置.css實現對元素定位 positioning 有四種不同的定位方式分別是static,relative,absolute,fixed.static是position屬性的預設屬性值,元素在正常的流之中,靜態定位元素不收四個方向的屬性影響.fixed相對...
CSS學習筆記 定位流
相對定位 絕對定位 固定定位 一 相對定位 relative 1.什麼是相對定位 相對自己以前的在標準流的位置移動 示例格式 position relative left 30px top 50px 2.注意點 2.1不會脫離標準流，會繼續在標準流中占用一定空間 2.2在設定樣式時，同一方向上 水平...