定位由定位模式和邊偏移組成
我們定位的盒子，是通過邊偏移來移動位置的。
在 css 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移：（方位名詞）
邊偏移屬性
示例描述
toptop: 80px
頂端偏移量，定義元素相對於其父元素上邊線的距離。
bottom
bottom: 80px
底部偏移量，定義元素相對於其父元素下邊線的距離。
left
left: 80px
左側偏移量，定義元素相對於其父元素左邊線的距離
right
right: 80px
右側偏移量，定義元素相對於其父元素右邊線的距離
定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。
在 css 中，通過 position 屬性定義元素的定位模式，語法如下：
選擇器static
靜態定位
relative
相對定位
absolute
絕對定位
fixed
固定定位
相對定位是元素相對於它 原來在標準流中的位置 來說的
相對定位的特點：
絕對定位是元素以帶有定位的父級元素來移動位置
完全脫標 —— 完全不佔位置；
父元素沒有定位，則以瀏覽器為準定位（document 文件）。
絕對定位的特點：
固定定位是絕對定位的一種特殊形式：
完全脫標 —— 完全不佔位置；
只認瀏覽器的可視視窗 —— 瀏覽器可視視窗 + 邊偏移屬性 來設定元素的位置；
注意：絕對定位/固定定位的盒子不能通過設定 margin: auto 設定水平居中。
絕對定位盒子水平居中：
left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；
margin-left: -100px;：讓盒子向左移動自身寬度的一半。
在使用定位布局時，可能會出現盒子重疊的情況。
加了定位的盒子，預設後來者居上， 後面的盒子會壓住前面的盒子。
應用 z-index 層疊等級屬性可以調整盒子的堆疊順序。
z-index 的特性如下：
屬性值：正整數、負整數或 0，預設值是 0，數值越大，盒子越靠上；
如果屬性值相同，則按照書寫順序，後來居上；
數字後面不能加單位。
注意：z-index 只能應用於相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效。
改變顯示模式有以下方式:
浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合併的問題。 （我們以前是用padding border overflow解決的）
也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合併的問題了。
注意：邊偏移需要和定位模式聯合使用，單獨使用無效；
top 和 bottom 不要同時使用；
left 和 right 不要同時使用。
css 布局之定位
往往在網頁布局中會出現覆蓋，這時我們需要使用定位技術了。什麼是定位，通俗來說就是你想讓元素在哪個位置。css定位的基本思想很簡單，它允許定義元素框相對於其正常位置應該出現的位置，或者相對于父元素 另乙個元素 甚至瀏覽器視窗本身的位置。相對定位 position relative 元素依然是佔位的 使...
CSS定位布局
絕對定位 如果想為元素設定層模型中的絕對定位，需要設定position absolute 表示絕對定位 這條語句的作用將元素從文件流中拖出來，然後使用left right top bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即...
css布局 定位
1 為什麼需要定位？某個元素可以自由的在乙個盒子內移動位置，並且壓住其他盒子 滾動視窗時，盒子固定在某個位置 2 應用 下拉列表 模態框 web應用程式的一些基本效果 3 本質 將元素徹底從文件流中移走。允許將元素放在螢幕的任意位 置，還可以將乙個元素放到另乙個元素的前面或者後面，彼此重疊。按照定位...